/* ByKuara — bilgi sayfaları (Form Studio 3. aşama, 2026-09-24): SSS, renk
   seçenekleri, teslimat ve iade, iletişim, hikâyemiz, 404. form.css'ten ve
   teslimat-iade.html'deki satır içi <style>'dan SONRA yüklenir (</head>'in
   hemen önünde).

   Düzen ürün sayfasındaki SSS ile aynı dil: bölüm başlığı solda, içerik
   sağda; sorular Manrope ve "+" işaretli; sayfa başlığı büyük Manrope +
   Georgia italik vurgu, üstünde küçük etiket. Önceden metin 780px'lik dar
   bir sütundaydı, 1440px ekranın sağ yarısı boş kalıyordu. */

/* ── Sayfa başı ── */
.bilgi-sayfa,.contact,.not-found{padding:88px 5% 120px}
.bilgi-sayfa{max-width:none}
.bilgi-sayfa>.eyebrow,.contact>.eyebrow,.not-found>.eyebrow{display:block;margin:0 0 30px;font-size:12px;font-weight:400;letter-spacing:.2em;color:var(--t1)}
.bilgi-sayfa h1,.contact>h1,.not-found h1{font-size:clamp(50px,6.1vw,96px);letter-spacing:-.065em;line-height:1.04;margin:0 0 34px}
.bilgi-sayfa .bilgi-giris,.bilgi-sayfa .sss-giris{max-width:640px;margin:0 0 70px;font-size:16px;line-height:1.9;color:var(--t4)}
.bilgi-sayfa .sss-giris a{color:var(--t1);text-decoration:underline;text-underline-offset:4px}

/* ── Bölümler: başlık solda, içerik sağda ──
   h2 ilk 12 satırı kaplar; satır aralığı 0 olduğu için boş satırlar yer
   tutmaz. Bloktaki diğer her şey (p, details, liste) sağ sütuna gider. */
.bilgi-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:8%;row-gap:0;margin:0;padding:56px 0;border-top:1px solid var(--t9)}
.bilgi-blok>h2{grid-column:1;grid-row:1/span 12;align-self:start;margin:0;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.05em;line-height:1.1}
.bilgi-blok>:not(h2){grid-column:2}
.bilgi-blok>p{max-width:68ch;margin:0 0 16px;font-size:15px;line-height:1.9;color:var(--t4)}
.bilgi-blok>p:last-child{margin-bottom:0}
.bilgi-blok strong{font-weight:600;color:var(--t1)}
.bilgi-blok a{color:var(--t1);text-decoration:underline;text-underline-offset:4px}

/* Cayma hakkı — alıcının satın almadan görmesi gereken bölüm: açık panel */
.bilgi-blok.vurgulu{margin:0 -4%;padding:56px 4%;border:0;border-radius:4px;background:var(--t10)}
.bilgi-blok.vurgulu+.bilgi-blok{border-top:0}

/* Renk kartları geniş kalsın: bu blokta liste başlığın altına iner */
.bilgi-blok:has(.renk-liste){display:block}
.bilgi-blok:has(.renk-liste)>h2{margin-bottom:30px}
/* studio.css'teki 280px en küçük sütun dar telefonda kartı ekrandan
   taşırıyordu; sütun ekrandan geniş olamaz */
.renk-liste{gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.renk-kart{padding:18px;border-radius:4px;background:var(--t10)}
.renk-ornek{width:46px;height:46px;border-radius:50%;border:1px solid #18231e26}
.renk-bilgi strong{font:500 18px/1.2 var(--baslik-yazi);letter-spacing:-.02em}
.renk-kod{font-size:12px;color:var(--t5)}
.renk-durumu{font-size:11px;letter-spacing:.14em;color:var(--v4)}
.renk-urun{font-size:13px;color:var(--t5)}

/* ── Sorular (SSS bölümleri ve iletişimdeki "Aklındaki sorular") ── */
.bilgi-blok details,.faq details{padding:0;border-bottom:1px solid var(--t9)}
.bilgi-blok summary,.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 48px 22px 0;
  font:500 19px/1.35 var(--baslik-yazi);letter-spacing:-.02em;color:var(--t1)}
.bilgi-blok summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.bilgi-blok summary::after,.faq summary::after{content:"+";position:absolute;right:2px;top:19px;font:300 24px/1 var(--govde-yazi);color:var(--t4)}
.bilgi-blok details[open] summary::after,.faq details[open] summary::after{content:"\2212"}
.bilgi-blok summary:hover,.faq summary:hover{color:var(--t3)}
.bilgi-blok details p,.faq details p{max-width:68ch;margin:-6px 0 24px;padding:0 30px 0 0;font-size:15px;line-height:1.9;color:var(--t4)}
/* SSS'te ilk soru başlıkla aynı hizada başlasın */
.bilgi-blok>details:first-of-type summary{padding-top:6px}
.bilgi-blok>details:first-of-type summary::after{top:3px}

/* ── İletişim ── */
.contact-grid{gap:20px}
.contact-grid>a{padding:34px;border-radius:4px}
.contact-grid span{font-size:12px;letter-spacing:.2em}
.contact-grid h2{font-size:clamp(30px,2.8vw,42px);letter-spacing:-.05em}
.contact-grid p{font-size:14px;color:var(--t4)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:8%;row-gap:0;max-width:none;margin:120px 0 0;padding-top:90px;border-top:1px solid var(--t9)}
.faq>h2{grid-column:1;grid-row:1/span 12;align-self:start;margin:0;font-size:clamp(40px,4.2vw,68px);letter-spacing:-.055em;line-height:1.05}
.faq>details{grid-column:2}
.faq>details:first-of-type{border-top:1px solid var(--t9)}

/* ── Hikâyemiz ── */
.principles span{font-size:12px;letter-spacing:.2em}
.principles h2{letter-spacing:-.05em}

/* ── 404 ── */
.not-found p{max-width:520px;font-size:16px;color:var(--t4)}

@media(max-width:900px){
  .bilgi-blok,.faq{grid-template-columns:1fr}
  .bilgi-blok>h2,.faq>h2{grid-row:auto;margin-bottom:22px}
  /* İçerik yukarıda grid-column:2'ye sabit; tek sütunda bırakılırsa tarayıcı
     örtük ikinci sütun açıyor ve başlık dar sütunda kelime kelime kırılıyordu */
  .bilgi-blok>:not(h2),.faq>details{grid-column:1}
  .bilgi-blok>details:first-of-type summary{padding-top:22px}
  .bilgi-blok>details:first-of-type summary::after{top:19px}
  .bilgi-blok>details:first-of-type{border-top:1px solid var(--t9)}
}
@media(max-width:760px){
  .bilgi-sayfa,.contact,.not-found{padding:52px 6% 70px}
  .bilgi-sayfa>.eyebrow,.contact>.eyebrow,.not-found>.eyebrow{margin-bottom:22px}
  .bilgi-sayfa h1,.contact>h1,.not-found h1{font-size:clamp(40px,11vw,52px);margin-bottom:26px}
  .bilgi-sayfa .bilgi-giris,.bilgi-sayfa .sss-giris{margin-bottom:44px;font-size:15px}
  .bilgi-blok{padding:40px 0}
  .bilgi-blok>h2{font-size:28px;margin-bottom:16px}
  .bilgi-blok.vurgulu{margin:0 -6%;padding:40px 6%;border-radius:0}
  .bilgi-blok summary,.faq summary,.bilgi-blok>details:first-of-type summary{font-size:17px;padding:18px 40px 18px 0}
  .bilgi-blok summary::after,.faq summary::after,.bilgi-blok>details:first-of-type summary::after{top:15px}
  .contact-grid>a{padding:24px}
  .faq{margin-top:70px;padding-top:56px}
  .faq>h2{font-size:clamp(36px,10vw,46px);margin-bottom:24px}
}