/* ══ Vitrin tasarımı (4 Kasım 2026): DUS Rehberi sayfaları, Apple ürün sayfalarının sakinliğinde ══════════
   Sayfanın kendi <style> bloğundan, rehber.css ve sade.css'ten SONRA, </head>'den hemen önce yüklenir;
   renk, köşe ve hareket değerleri vitrin-tokenlar.css'ten gelir (o dosya bundan hemen önce bağlanır).
   Yalnızca görünüşe dokunur; içerik, başlık sırası ve yapılandırılmış veri aynı kalır.
   Dil: beyaz sayfa, açık gri (#F5F5F7) karolar, ortalanmış iri ve sıkı başlık, 17 px gövde, hap düğmeler,
   kapanışta koyu karo. Hareket: sayfa başı açılışta yumuşakça yükselir; karolar kaydırdıkça belirir
   (yalnızca kaydırmaya bağlı animasyonu destekleyen tarayıcıda ve "hareketi azalt" kapalıyken). */
html{scroll-padding-top:72px;}
body{background:#fff; color:var(--v-ink); letter-spacing:-.003em;}
a{color:var(--v-marka-koyu);}

/* ---------- Üst çubuk: buzlu, ince ---------- */
.tb{min-height:52px; padding:6px max(20px, calc((100% - 980px) / 2)); z-index:50;
  background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);}
.logo{width:32px; height:32px; border-radius:9px; background:var(--v-marka);}
.logo svg{width:22px; height:22px;}
.bname{font-size:18px; letter-spacing:-.02em;}
.back{min-height:36px; padding:0 16px; border-radius:var(--v-r-hap); background:var(--v-ink); color:#fff; font:600 14px/1 'Figtree',sans-serif;
  transition:background-color .2s ease;}
.back:hover{background:#000;}
@media (pointer:coarse){ .back{min-height:44px;} }

/* ---------- Sayfa gövdesi ---------- */
.wrap{max-width:908px; padding:0 24px clamp(48px,7vw,88px);}
.wrap > p, .wrap > ul, .wrap > ol, .wrap > .not, .wrap > .konular{max-width:720px;}
p, li{font-size:17px; line-height:1.6; color:var(--v-soft);}
li strong, p strong, p b{color:var(--v-ink);}
h1{font-weight:800; letter-spacing:-.04em; color:var(--v-ink);}
h2{font-size:clamp(28px,3.6vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.03em; margin:clamp(56px,8vw,96px) 0 16px; color:var(--v-ink);}
h3{font-size:clamp(19px,2vw,22px); font-weight:700; letter-spacing:-.015em; color:var(--v-ink);}
.not{font-size:14px; line-height:1.55; color:var(--v-faint);}
.konular{font-size:16px; color:var(--v-soft);}
.konular strong{color:var(--v-ink); font-weight:700;}

/* ---------- Sayfa başı: ortalanmış, iri ve sıkı ---------- */
.rb-baslik-grup{margin:0 0 clamp(32px,5vw,56px); padding:clamp(48px,9vw,112px) 0 0; border-radius:0; background:none; text-align:center;}
.rb-ust-etiket{min-height:0; padding:0; margin:0 0 14px; border:0; border-radius:0; background:none;
  color:var(--v-marka); font:700 clamp(15px,1.6vw,19px)/1.2 'Figtree',sans-serif; letter-spacing:-.005em;}
.rb-baslik-grup h1, h1{font-size:clamp(40px,7vw,72px); line-height:1.04; max-width:880px; margin:0 auto 20px;}
.rb-baslik-grup p{max-width:700px; margin:0 auto; font-size:clamp(18px,2vw,22px); line-height:1.45; font-weight:500; letter-spacing:-.01em; color:var(--v-soft);}
.rb-baslik-grup p a{font-weight:700;}
@media (prefers-reduced-motion:no-preference){
  .rb-baslik-grup > *{animation:v-giris .9s var(--v-yay) both;}
  .rb-baslik-grup > :nth-child(2){animation-delay:.08s;}
  .rb-baslik-grup > :nth-child(3){animation-delay:.16s;}
  .rb-baslik-grup > :nth-child(n+4){animation-delay:.24s;}
}

/* ---------- Öne çıkan sayılar: gri karolar, iri marka rengi rakam ---------- */
.rb-uclu-ozet{gap:clamp(12px,1.6vw,18px); margin:0 0 clamp(40px,6vw,64px);}
.rb-kural-kutu{gap:10px; padding:clamp(24px,3vw,32px); border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo); box-shadow:none;}
.rb-kural-kutu b{font:800 clamp(23px,2.5vw,28px)/1.1 'Figtree',sans-serif; letter-spacing:-.03em; color:var(--v-marka-koyu);
  background:linear-gradient(120deg,var(--v-marka-koyu) 10%,var(--v-marka-acik) 95%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.rb-kural-kutu span{font-size:15px; line-height:1.45; color:var(--v-soft);}

/* ---------- Adım karoları ---------- */
.rb-adim-liste{gap:clamp(14px,2vw,20px); margin-top:0;}
.rb-adim-kart{display:block; padding:clamp(28px,5vw,56px); border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo); box-shadow:none;}
.rb-adim-no{display:block; width:auto; height:auto; margin:0 0 10px; border:0; border-radius:0; background:none;
  font:800 clamp(44px,6vw,64px)/.9 'Figtree',sans-serif; letter-spacing:-.04em; color:var(--v-marka-koyu);
  background-image:linear-gradient(160deg,var(--v-marka-acik),var(--v-marka-koyu)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.rb-adim-govde{max-width:720px;}
.rb-adim-govde h2{margin:0 0 14px; font:800 clamp(26px,3.4vw,36px)/1.1 'Figtree',sans-serif; letter-spacing:-.03em; color:var(--v-ink);}
.rb-adim-govde p{margin:0 0 14px; font-size:17px; line-height:1.6; color:var(--v-soft);}
.rb-adim-govde ul{margin:0 0 14px; padding-left:20px;}
.rb-adim-govde li{font-size:17px; line-height:1.55; margin-bottom:8px;}

/* Bağlantı satırları: karo içinde ince çizgili satırlar, sağda ok */
.sd-baglanti{margin:22px 0 0; border-top:1px solid var(--v-line);}
.rb-adim-kart .sd-baglanti{margin-top:22px;}
.sd-baglanti a{min-height:52px; border-bottom-color:var(--v-line); color:var(--v-marka-koyu); font:600 17px/1.35 'Figtree',sans-serif; letter-spacing:-.01em;}
.sd-baglanti a:hover, .rb-adim-kart .sd-baglanti a:hover{background:transparent; color:var(--v-marka);}
.sd-baglanti a::after{transition:transform .2s var(--v-yay);}
.sd-baglanti a:hover::after{transform:translateX(3px) rotate(45deg);}

/* ---------- Bilgi, kavram ve bağlantı kartları ---------- */
.rb-bilgi-kart, .kavram-kart, .rb-link-kart, .yy-kart{border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo); box-shadow:none;}
.rb-bilgi-kart{padding:clamp(22px,3vw,32px); border-top:0;}
.rb-bilgi-kart h3{font:800 clamp(20px,2.2vw,24px)/1.2 'Figtree',sans-serif; letter-spacing:-.02em;}
.rb-bilgi-kart p{font-size:16px;}
article.kavram-kart{padding:clamp(22px,3.5vw,36px); border:0; box-shadow:none;}
article.kavram-kart .kavram-ust h3{font:800 clamp(19px,2vw,22px)/1.25 'Figtree',sans-serif; letter-spacing:-.02em;}
article.kavram-kart li{border:0; background:#fff; border-radius:var(--v-r-kucuk); font-size:15.5px;}
.rb-link-kart{padding:22px 24px; transition:transform .25s var(--v-yay), background-color .2s ease;}
.rb-link-kart:hover{transform:translateY(-2px); background:var(--v-karo-ust);}
.rb-link-kart b{font:700 17px/1.35 'Figtree',sans-serif; color:var(--v-marka-koyu);}
.rb-link-kart span{font-size:15px;}

/* ---------- Örnek sorular ---------- */
.soru{padding:clamp(22px,4vw,40px); border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo);}
.soru h3{margin-top:0;}
.soru details{background:#fff; border:0; border-radius:var(--v-r-kucuk);}

/* ---------- Sık sorulanlar: çizgili sade akordeon ---------- */
details{border:0; border-bottom:1px solid var(--v-line); border-radius:0; background:none; margin:0;}
details[open]{border-color:var(--v-line);}
.wrap > details:first-of-type, h2 + details{border-top:1px solid var(--v-line);}
summary{min-height:64px; padding:18px 4px; font:600 clamp(17px,1.8vw,19px)/1.35 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--v-ink);}
summary::after{width:10px; height:10px; border-color:var(--v-faint);}
details[open] summary::after{border-color:var(--v-marka);}
details p{padding:0 4px 22px; font-size:17px;}
.soru details summary, .rb-arac-detay summary{padding:14px 20px; min-height:56px;}
.soru details p{padding:0 20px 18px;}
.rb-arac-detay{border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo); box-shadow:none;}
.sm-ic{border-top-color:var(--v-line);}

/* ---------- Düğmeler: hap ---------- */
.cta, .rb-btn{min-height:48px; padding:0 26px; border-radius:var(--v-r-hap); font:600 17px/1 'Figtree',sans-serif; letter-spacing:-.01em;
  transition:transform .25s var(--v-yay), background-color .2s ease, border-color .2s ease;}
.cta:hover, .rb-btn:hover{transform:scale(1.02);}
.cta:active, .rb-btn:active{transform:scale(.98);}
.rb-btn.kucuk{min-height:40px; border-radius:var(--v-r-hap); font-size:15px;}
.rb-cip{border-radius:var(--v-r-hap);}

/* ---------- Kapanış: koyu karo ---------- */
.rb-cta-kutu{flex-direction:column; align-items:center; justify-content:center; gap:22px; margin-top:clamp(48px,7vw,88px);
  padding:clamp(44px,7vw,80px) clamp(24px,5vw,56px); border:0; border-radius:var(--v-r-buyuk); text-align:center; box-shadow:none;
  background:var(--v-koyu-karo); color:#fff;}
.rb-cta-kutu b{font:800 clamp(28px,4vw,44px)/1.08 'Figtree',sans-serif; letter-spacing:-.035em; color:#fff;}
.rb-cta-kutu span{margin-top:12px; font-size:clamp(17px,1.8vw,19px); line-height:1.45; color:rgba(255,255,255,.72);}
.rb-cta-kutu .cta{background:var(--v-nane); border-color:var(--v-nane); color:#04241F;}
.rb-cta-kutu .cta:hover{background:var(--v-nane-acik); border-color:var(--v-nane-acik);}

/* ---------- Araç panelleri ve tablolar: yalnızca köşe ve aralık ---------- */
.sm, .dm-ekran, .tk-ekran, .tk-zaman, .pl-ayar, .bm-ekran{border-radius:var(--v-r-buyuk);}
.tablo-kutu{border-radius:var(--v-r); border-color:var(--v-cizgi);}

/* ---------- Alt bilgi: tam genişlik açık gri ---------- */
.alt{max-width:none; margin:0; padding:28px max(24px, calc((100% - 860px) / 2)) 56px; border-top:0; background:var(--v-karo); font-size:12px; color:var(--v-faint);}
.alt nav{gap:0 18px; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--v-line);}
.alt nav span{font-weight:700; color:var(--v-ink);}
.alt nav a{color:var(--v-soft); font-size:12.5px;}
.alt nav a:hover{color:var(--v-ink); text-decoration:underline;}
.alt p{font-size:12px; color:var(--v-faint);}
@media (pointer:fine){ .alt nav span, .alt nav a{min-height:30px;} }

/* ---------- Branş sayfaları: geri bağlantısı, mini sınav, ilgili sayfalar ---------- */
.wrap > p.not:first-child{margin:20px 0 0;}
.wrap > p.not:first-child a{font-weight:600; text-decoration:none;}
.dm-ekran, .tk-ekran, .pl-ayar{background:var(--v-koyu-panel);}
nav[aria-label="İlgili sayfalar"] ul{list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
nav[aria-label="İlgili sayfalar"] li{margin:0;}
nav[aria-label="İlgili sayfalar"] li a{display:flex; align-items:center; justify-content:space-between; gap:14px; height:100%; min-height:64px;
  padding:16px 22px; border-radius:var(--v-r); background:var(--v-karo); color:var(--v-ink); font:600 16px/1.35 'Figtree',sans-serif;
  letter-spacing:-.01em; text-decoration:none; transition:background-color .2s ease, transform .25s var(--v-yay);}
nav[aria-label="İlgili sayfalar"] li a::after{content:""; flex:none; width:8px; height:8px; border-top:2px solid var(--v-marka); border-right:2px solid var(--v-marka); transform:rotate(45deg);}
nav[aria-label="İlgili sayfalar"] li a:hover{background:var(--v-karo-ust); transform:translateY(-2px);}
@media (max-width:640px){ nav[aria-label="İlgili sayfalar"] ul{grid-template-columns:1fr; gap:10px;} }

/* ---------- Karıştırılan kavramlar ve branş listesi: düz satırlar yerine karolar ---------- */
article.kavram-kart.sd-liste-kart{margin:0 0 14px; padding:clamp(24px,3.5vw,36px); border:0; border-radius:var(--v-r-buyuk); background:var(--v-karo);}
article.kavram-kart.sd-liste-kart:last-of-type{border-bottom:0;}
article.kavram-kart.sd-liste-kart .kavram-ust h3{font:800 clamp(19px,2vw,22px)/1.25 'Figtree',sans-serif; letter-spacing:-.02em; color:var(--v-ink);}
article.kavram-kart.sd-liste-kart .kavram-ust .not{margin-top:4px; font-size:14px;}
article.kavram-kart.sd-liste-kart .kavram-soru{margin:14px 0; font:600 16px/1.45 'Figtree',sans-serif; color:var(--v-ink);}
article.kavram-kart.sd-liste-kart ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
article.kavram-kart.sd-liste-kart li{padding:16px 18px; border-radius:var(--v-r-kucuk); background:#fff; font:500 15.5px/1.55 'Figtree',sans-serif; color:var(--v-soft);}
article.kavram-kart.sd-liste-kart li strong{display:block; margin:0 0 4px; font:700 15.5px/1.35 'Figtree',sans-serif; color:var(--v-marka-koyu);}
@media (max-width:640px){ article.kavram-kart.sd-liste-kart ul{grid-template-columns:1fr;} }
.sd-brans{margin:0 0 12px; padding:22px clamp(20px,3vw,28px); border:0; border-radius:var(--v-r); background:var(--v-karo);}
.sd-brans h3{font:800 clamp(18px,1.9vw,20px)/1.3 'Figtree',sans-serif; letter-spacing:-.015em;}
.sd-brans h3 a{color:var(--v-ink);}
.sd-brans-soru{font-size:14px; color:var(--v-faint);}

/* ---------- Telefon ---------- */
@media (max-width:640px){
  .wrap{padding:0 16px 56px;}
  .rb-baslik-grup{padding-top:40px;}
  .rb-kural-kutu{padding:22px 24px;}
  .rb-adim-kart, .soru{padding:26px 22px;}
  .rb-cta-kutu{padding:44px 22px;}
  .alt{padding:24px 16px 48px;}
}

/* ---------- Kaydırırken beliren karolar ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rb-adim-kart, .rb-kural-kutu, .rb-bilgi-kart, .kavram-kart, .rb-link-kart, .soru, .rb-cta-kutu, .tablo-kutu, .sd-brans{
      animation:v-belir linear both; animation-timeline:view(); animation-range:entry 0% entry 30%;}
  }
}