:root{
  --bg:#0b0b0b;
  --card:#dcdcdc; --card-light:#efefef; --input:#ffffff;
  --ink:#0f0f0f; --ink-soft:#3a3a3a;
  --gold:#d8a72c; --gold-dark:#b8860b;
  --up:#1e7e34; --down:#b02a1e;
  --radius:18px;
  --serif:"Lora",Georgia,serif;
  --stickyh:130px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;scroll-padding-top:calc(var(--stickyh) + 10px);color-scheme:dark}
body{background:var(--bg);font-family:var(--serif);color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent}
button,a,select,input{touch-action:manipulation}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);font-weight:700;padding:12px 20px;border-radius:0 0 12px 0;z-index:100}
.skip:focus{left:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- Animasyonlar (yalnızca transform/opacity: akıcı, ana iş parçacığını yormaz) ---- */
@view-transition{navigation:auto} /* sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda) */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tcard,.calc,.pcard,.info,.related{animation:fadeUp .45s ease-out both}
.calc{animation-delay:.06s}.info{animation-delay:.1s}.related{animation-delay:.12s}
tbody tr.giris{animation:rowIn .4s ease-out both}
.menu.open{animation:menuIn .16s ease-out}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.more-btn,.pill button,.back,.related .links a{transition:background .2s,color .2s,transform .15s}
.more-btn:active,.pill button:active,.back:active,.related .links a:active{transform:scale(.97)}
.back:hover{transform:translateX(-3px)}
.related .links a:hover{transform:translateY(-2px)}
.wrap{max-width:600px;margin:0 auto;padding:0 18px 60px}

/* ---- Yapışkan üst blok: logo + güncelleme ---- */
.sticky{position:sticky;top:0;z-index:50;background:var(--bg);padding:18px 0 12px;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.logo{font-family:var(--serif);font-weight:600;font-size:1.7rem;color:var(--gold);letter-spacing:.01em;text-decoration:none}
.menu-btn{width:56px;height:56px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;padding:10px}
.menu-btn span{display:block;height:3px;border-radius:2px;background:var(--gold);transition:width .25s}
.menu-btn span:nth-child(1){width:34px}
.menu-btn span:nth-child(2){width:22px}
.menu-btn:hover span,.menu-btn[aria-expanded="true"] span{width:34px}
.menu{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--card-light);border-radius:14px;padding:8px 0;min-width:230px;box-shadow:0 10px 34px rgba(0,0,0,.55);z-index:60}
.menu.open{display:block}
.menu a{display:block;padding:15px 22px;color:var(--ink);font-weight:700;font-size:1.02rem;text-decoration:none}
.menu a + a{border-top:1px solid rgba(0,0,0,.08)}
.menu a:hover{background:rgba(216,167,44,.22)}

.status{background:var(--card-light);border-radius:14px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.status .live{font-size:1.02rem;display:flex;align-items:center;gap:9px}
.status .live::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--up);animation:pulse 2s infinite}
.status.demo .live::before{background:#c07f00}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.status .upd{font-size:.95rem;color:var(--ink-soft)}
.status .upd b{color:var(--ink);font-variant-numeric:tabular-nums}

.banner{display:none;background:#2b2109;border:1px solid #7a5c14;color:var(--gold);padding:12px 16px;border-radius:12px;font-size:.95rem;margin:14px 0}
.banner.show{display:block}

/* ---- Geri butonu ---- */
.back{display:inline-flex;align-items:center;gap:8px;margin:18px 0 4px;background:none;border:2px solid var(--gold);color:var(--gold);font-family:var(--serif);font-weight:700;font-size:1rem;padding:10px 20px;border-radius:999px;cursor:pointer;text-decoration:none}
.back:hover{background:var(--gold);color:var(--ink)}

h1{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#f2f2f2;margin:18px 0 14px;text-wrap:balance}
/* Yapışkan bloktaki sayfa başlığı: kaydırınca yer açmak için kapanır */
.sticky h1{font-size:1.3rem;margin:12px 2px 0;max-height:60px;overflow:hidden;transition:opacity .25s,max-height .25s,margin .25s}
.sticky h1.gizli{opacity:0;max-height:0;margin-top:0;margin-bottom:0}

/* ---- Lejant (yapışkan blokta; tablo sütunlarıyla birebir hizalı) ---- */
.legend{display:grid;grid-template-columns:30% 23% 23% 24%;background:var(--card-light);border-radius:14px;padding:12px 0;margin-top:10px;font-weight:700;font-size:1.02rem;max-height:60px;overflow:hidden;transition:opacity .25s,max-height .25s,margin-top .25s,padding .25s}
.legend span{padding-left:16px}
.legend.gizli{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Fiyat tablosu ---- */
.tcard{background:var(--card);border-radius:var(--radius);overflow:hidden;margin:14px 0 28px}
.tcard table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
tbody td{font-weight:700;font-size:1.05rem;padding:15px 16px;border-top:1px solid rgba(0,0,0,.09)}
tbody td:nth-child(2),tbody td:nth-child(3){white-space:nowrap}
tbody tr:first-child td{border-top:none}
tbody tr{cursor:pointer}
td .pname{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.cellx{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cellx .go{color:var(--gold-dark);font-weight:700;font-size:1.25rem;line-height:1;flex-shrink:0}
tbody tr.extra{display:none}
.tcard.expanded tbody tr.extra{display:table-row}
tbody td a{color:inherit;text-decoration:none;display:block}
tbody tr:hover{background:rgba(216,167,44,.1)}
td .sub{display:block;font-size:.74rem;font-weight:500;color:var(--ink-soft);margin-top:3px}
td .tl{font-size:.68rem;font-weight:600;color:var(--ink-soft);margin-left:3px}
.chg{font-weight:700;font-size:.95rem;white-space:nowrap}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}.chg.flat{color:var(--ink-soft)}
.flash-up{animation:fup 1.2s}.flash-down{animation:fdown 1.2s}
@keyframes fup{0%{background:rgba(30,126,52,.22)}100%{background:transparent}}
@keyframes fdown{0%{background:rgba(176,42,30,.22)}100%{background:transparent}}
.more-btn{display:block;width:100%;border:none;cursor:pointer;background:var(--gold);color:var(--ink);font-family:var(--serif);font-weight:700;font-size:1.1rem;padding:17px;text-align:center;border-radius:0 0 var(--radius) var(--radius)}
.more-btn:hover{background:var(--gold-dark)}
.more-btn .arr{display:inline-block;margin-left:8px;transition:transform .25s}
.tcard.expanded .more-btn .arr{transform:rotate(180deg)}
@media(max-width:480px){
  tbody td{padding:13px 10px;font-size:.95rem}
  .legend{padding:11px 0;font-size:.95rem}
  .legend span{padding-left:10px}
  .chg{font-size:.82rem}
  .cellx .go{font-size:1.1rem}
}

/* ---- Ürün sayfası fiyat kartı ---- */
.pcard{background:var(--card);border-radius:var(--radius);padding:22px;margin:14px 0 24px}
.pcard .pimg{display:block;margin:0 auto 16px;border-radius:14px;max-width:100%;height:auto}
.pcard .prow{display:flex;gap:14px;text-align:center}
.pcard .pbox{flex:1;background:var(--input);border-radius:14px;padding:16px 10px}
.pcard .pbox .lbl{font-size:.9rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.pcard .pbox .val{font-weight:700;font-size:1.45rem;font-variant-numeric:tabular-nums}
.pcard .pbox .val small{font-size:.8rem;color:var(--ink-soft)}
.pcard .pmeta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.95rem;font-weight:600;color:var(--ink-soft)}
@media(max-width:480px){.pcard .pbox .val{font-size:1.15rem}}

/* ---- Hesaplayıcı ---- */
.calc{background:var(--card);border-radius:var(--radius);padding:24px 22px 26px}
.calc h2{font-weight:700;font-size:1.4rem;margin-bottom:6px}
.calc .hint{font-size:.95rem;color:var(--ink-soft);margin-bottom:18px}
.calc label{display:block;font-weight:700;font-size:1rem;margin:16px 0 8px;color:var(--ink-soft)}
.calc select,.calc input{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink);background:var(--input);border:2px solid transparent;border-radius:14px;padding:16px 18px;width:100%;appearance:none;-webkit-appearance:none}
.calc .sel{position:relative}
.calc .sel::after{content:"";position:absolute;right:18px;top:50%;width:11px;height:11px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.calc .sel select{padding-right:46px;cursor:pointer}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--gold)}
.pill{display:flex;background:var(--input);border-radius:999px;padding:5px;gap:5px}
.pill button{flex:1;border:none;background:none;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--ink-soft);padding:14px 10px;border-radius:999px;transition:background .2s,color .2s}
.pill button.active{background:var(--gold);color:var(--ink)}
.amount-row{display:flex;gap:12px;align-items:stretch}
.amount-row input{flex:1;min-width:0}
.unit-chip{display:flex;align-items:center;justify-content:center;background:#c8c8c8;border-radius:14px;padding:0 22px;font-weight:700;font-size:1.1rem;color:var(--ink-soft);white-space:nowrap}
.result{margin-top:18px;background:var(--gold);border-radius:14px;padding:20px;text-align:center;font-weight:700;font-size:1.7rem;font-variant-numeric:tabular-nums}
.result small{display:block;font-size:.85rem;font-weight:600;color:rgba(15,15,15,.7);margin-top:4px}
.disclaimer{margin-top:14px;font-size:.85rem;font-weight:500;color:var(--ink-soft);text-align:center;font-style:italic}

/* ---- İçerik / SEO metinleri ---- */
.info{color:#c9c9c9;font-size:1rem;line-height:1.75;margin:26px 0}
.info h2{color:var(--gold);font-size:1.25rem;margin:26px 0 10px}
.info h3{color:#eee;font-size:1.08rem;margin:20px 0 8px}
.info p{margin-bottom:12px}
.info a{color:var(--gold)}
.related{margin:24px 0}
.related h2{color:var(--gold);font-size:1.2rem;margin-bottom:12px}
.related .links{display:flex;flex-wrap:wrap;gap:10px}
.related .links a{background:var(--card-light);color:var(--ink);font-weight:700;font-size:.95rem;padding:11px 18px;border-radius:999px;text-decoration:none}
.related .links a:hover{background:var(--gold)}

/* ---- Çerez bildirimi ---- */
.cerez{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin:0 auto;background:var(--card-light);border-radius:16px;padding:18px 20px;box-shadow:0 14px 44px rgba(0,0,0,.65);animation:fadeUp .4s ease-out}
.cerez p{font-size:.92rem;line-height:1.55;color:var(--ink);margin-bottom:14px}
.cerez a{color:var(--gold-dark);font-weight:700}
.cerez .crow{display:flex;gap:10px}
.cerez button{flex:1;border:none;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1rem;padding:13px;border-radius:999px;transition:background .2s,transform .15s}
.cerez button:active{transform:scale(.97)}
#cerezKabul{background:var(--gold);color:var(--ink)}
#cerezKabul:hover{background:var(--gold-dark)}
#cerezRet{background:none;border:2px solid var(--ink-soft);color:var(--ink-soft)}
#cerezRet:hover{background:rgba(0,0,0,.08)}

footer{text-align:center;margin-top:36px;font-size:.85rem;color:#888;line-height:1.8}
footer b{color:var(--gold)}
footer a{color:#aaa}