/* =========================================================================
   SARMAL AI  ·  uc sayfalik uygulama sitesi  ·  degerler ve ortak duzen
   -------------------------------------------------------------------------
   YON: "Gece ve bakir" - agir, sicak, ciddi.

   NEDEN DEGISTI - Emrullah KARA, 2026-09-15:
     "Site renkleri hosuma gitmedi, cok basit ve cocuk isi gosterdi.
      Farkli renkleri biraz daha agir olarak kullansak mi."
   Teshis: sorun rengin CANLI olmasi degildi. Uc doygun renk (turuncu,
   yesil, sari) BUYUK BLOKLAR halinde, 3 piksel siyah cerceve ve sert duz
   golge ile kullanilmisti. O birlesim cikartma/oyuncak dili uretir.
   Cozum: ayni enerji korunur ama renk AZ YERDE ve KOYU TONDA harcanir,
   cerceveler incelir, golge kalkar, koseler keskinlesir.

   KURUMSAL SITEDEN AYRIM (Emrullah KARA: "tamamen farkli olsun"):
     sarmalsistem.com.tr  -> SOGUK lacivert #071625 + turkuaz #11d4d4
     sarmalai.com.tr      -> SICAK gece #14110d + bakir #d98a4e + altin
   Ikisi de koyu, ama biri mavi-soguk biri kahve-sicak. Tek renk ortak degil.
   Bu bir R2 sapmasidir; kanonik kayda islenmesi onay bekler.
   Kanonik kayit: knowledge/TASARIM_SISTEMI.md · OWNER_PROFILE.md Bolum 3

   KONTRAST - hesaplanarak olculdu, goz karariyla kabul edilmedi:
     baslik #e8e0d2 / gece ......... 14,36  gecer
     govde  #a89b86 / gece .........  6,90  gecer
     bakir  #d98a4e / gece .........  6,90  gecer
     altin  #c9a227 / gece .........  7,78  gecer
     yesil  #6f9c85 / gece .........  6,07  gecer
     gece   / krem ................. 15,29  gecer
     govde  #4a4336 / krem .........  7,94  gecer
     bakir metin #9a4a16 / krem ....  5,07  gecer
     yesil metin #2f5d4a / krem ....  6,12  gecer
     krem   / bakir blok #8a4a1c ...  5,54  gecer
     gece   / altin blok #c9a227 ...  7,78  gecer
     krem   / yesil blok #2f5d4a ...  6,12  gecer
   KULLANILMAYAN: yesil #4e7c64 gece uzerinde 3,94 - yalniz buyuk metinde
   gecerdi, hic kullanilmadi.
   ========================================================================= */

:root{
  /* --- Gece · ana zemin, sicak siyah. Lacivert DEGIL --------------------- */
  --gece:   #14110d;
  --gece-2: #1e1a14;   /* yukseltilmis kat, kart ici */
  --gece-3: #2a251c;   /* ucuncu kat, giris alani */

  /* --- Krem · nefes veren acik bolum ------------------------------------ */
  --krem:   #ede7db;
  --krem-2: #e3dbcb;

  /* --- Vurgu · AZ YERDE harcanir. Blok degil, cizgi ve kelime ----------- */
  --bakir:       #d98a4e;   /* gece uzerinde ana vurgu */
  --bakir-blok:  #8a4a1c;   /* blok zemini, ustune krem yazilir */
  --bakir-metin: #9a4a16;   /* krem uzerinde metin */
  --altin:       #c9a227;   /* rakam ve fiyat. Gece uzerinde */
  --yesil:       #6f9c85;   /* ucretsiz taraf, gece uzerinde */
  --yesil-blok:  #2f5d4a;   /* ucretsiz blok zemini */
  --yesil-metin: #2f5d4a;   /* krem uzerinde metin */

  /* --- Metin ------------------------------------------------------------ */
  --on-gece:      #e8e0d2;
  --on-gece-soft: #a89b86;
  --on-krem:      #14110d;
  --on-krem-soft: #4a4336;

  /* --- Cizgi · ince ve alcak kontrast. 3 piksel cerceve KALDIRILDI ------ */
  --cizgi:      #e8e0d21f;
  --cizgi-kuv:  #e8e0d235;
  --cizgi-krem: #14110d24;

  /* --- Yazi ------------------------------------------------------------- */
  --font-baslik:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;
  --font-govde: 'Figtree','Manrope',system-ui,sans-serif;

  /* Baslik olcegi kucultuldu ve agirlik 800'den 600'e indi.
     Devasa + cok kalin birlesimi bagiriyordu. */
  --fs-hero: clamp(38px,5.6vw,74px);
  --fs-h2:   clamp(26px,3.6vw,44px);
  --fs-h3:   clamp(19px,2.2vw,26px);
  --fs-lede: clamp(16px,1.7vw,20px);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --kose: 3px;   /* neredeyse keskin. Yuvarlak hap duğme kaldirildi */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-govde); background:var(--gece); color:var(--on-gece-soft);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-baslik);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:var(--on-gece)}
a{color:var(--bakir)}
img,video{max-width:100%;display:block}
.kap{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--s3)}

/* --- Etiket: hap degil, ince cizgili kucuk kutu ----------------------- */
.etiket{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;
  border:1px solid var(--cizgi-kuv);background:transparent;color:var(--on-gece-soft);
}
.etiket.turuncu{border-color:#d98a4e59;color:var(--bakir)}
.etiket.yesil{border-color:#6f9c8559;color:var(--yesil)}
.etiket.sari{border-color:#c9a22759;color:var(--altin)}
/* Marka ve alan adi buyuk harfe cevrilmez - Turkce i harfi bozuluyor */
.etiket.ad{text-transform:none;letter-spacing:.04em;font-size:12px}
/* Acik zeminde etiket kendi rengini alir */
.krem-bolum .etiket{border-color:var(--cizgi-krem);color:var(--on-krem-soft)}
.krem-bolum .etiket.turuncu{border-color:#9a4a1640;color:var(--bakir-metin)}
.krem-bolum .etiket.yesil{border-color:#2f5d4a40;color:var(--yesil-metin)}

/* --- Ust serit ve menu ------------------------------------------------ */
.ust{border-bottom:1px solid var(--cizgi);background:#14110deb;backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.ust .kap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;padding-block:16px}
.marka{font-family:var(--font-baslik);font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--on-gece);display:flex;align-items:center;gap:9px}
.marka i{width:7px;height:7px;border-radius:50%;background:var(--bakir);display:block;font-style:normal}
.menu{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.menu a{
  font-size:14px;font-weight:600;color:var(--on-gece-soft);text-decoration:none;
  padding:8px 13px;border-radius:2px;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--on-gece)}
.menu a[aria-current="page"]{color:var(--on-gece);border-bottom-color:var(--bakir)}

/* --- Dugmeler: keskin, ince, golgesiz --------------------------------- */
.dugme{
  display:inline-block;font-family:var(--font-govde);font-size:15px;font-weight:700;
  padding:14px 24px;border-radius:var(--kose);text-decoration:none;
  background:var(--bakir-blok);color:var(--krem);border:1px solid transparent;
  transition:background .12s,border-color .12s;
}
.dugme:hover{background:#9c5520}
.dugme.yesil{background:var(--yesil-blok)}
.dugme.yesil:hover{background:#376b56}
.dugme.sari{background:var(--altin);color:var(--gece)}
.dugme.sari:hover{background:#d8ae2c}
.dugme.bos{background:transparent;border-color:var(--cizgi-kuv);color:var(--on-gece)}
.dugme.bos:hover{border-color:var(--bakir);color:var(--bakir)}
.dugme.koyu{background:var(--gece);color:var(--on-gece);border-color:var(--cizgi-kuv)}
.dugmeler{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Acik zeminde dugme */
.krem-bolum .dugme.bos{border-color:var(--cizgi-krem);color:var(--on-krem)}
.krem-bolum .dugme.koyu{background:var(--gece);color:var(--krem);border-color:transparent}

/* --- Acik bolum ------------------------------------------------------- */
.krem-bolum{background:var(--krem);color:var(--on-krem-soft)}
.krem-bolum h1,.krem-bolum h2,.krem-bolum h3{color:var(--on-krem)}
.krem-bolum a{color:var(--bakir-metin)}

/* --- Alt bilgi -------------------------------------------------------- */
.alt{border-top:1px solid var(--cizgi);padding-block:var(--s6) var(--s5);margin-top:var(--s7)}
.alt a{color:var(--on-gece-soft);text-decoration:none}
.alt a:hover{color:var(--bakir)}
.alt h3{font-size:var(--fs-h3);margin-bottom:var(--s3)}
.alt-govde{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between}
.alt-baglantilar{display:flex;flex-direction:column;gap:11px;font-size:15px}
.alt-kunye{font-size:13px;border-top:1px solid var(--cizgi);margin-top:var(--s5);padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between}

/* --- Ortak: dogru fiyat seridi (kandirmaca yok) -----------------------
   Once sari bir blok idi ve sayfanin en gurultulu yeriydi. Simdi koyu
   ucuncu kat zemin ustunde, altin yalniz baslik kelimesinde. */
.dogru-fiyat{background:var(--gece-3);border-block:1px solid var(--cizgi);padding-block:var(--s6)}
.dogru-fiyat h2{font-size:var(--fs-h3);margin-block:var(--s3) var(--s3);max-width:30ch}
.dogru-fiyat h2 em{font-style:normal;color:var(--altin)}
.dogru-fiyat p{max-width:62ch}
.dogru-fiyat .kalemler{display:grid;gap:0;grid-template-columns:1fr;margin-top:var(--s5);border-top:1px solid var(--cizgi)}
.dogru-fiyat .kalem{padding:var(--s3) 0;border-bottom:1px solid var(--cizgi)}
.dogru-fiyat .kalem b{display:block;font-family:var(--font-baslik);font-weight:600;font-size:17px;color:var(--on-gece);margin-bottom:7px}
.dogru-fiyat .kalem span{font-size:14px}

@media (min-width:820px){
  .dogru-fiyat .kalemler{grid-template-columns:repeat(3,1fr);gap:0 var(--s5);border-bottom:1px solid var(--cizgi)}
  .dogru-fiyat .kalem{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}