/* ====================================================================
   SAYFA DUZENI - ELLE YAZILIR, URETILMEZ.

   Sinir (test/site_uret.dart icinde de yazili): uygulamadan URETILEN
   sey RENK, PUNTO ve OLCU'dur; YERLESIM degildir. Telefon ekrani ile
   tarayici penceresi ayni sey degil.

   KURAL: bu dosyaya renk kodu, punto degeri ya da olcu SABITI
   YAZILMAZ. Hepsi temel.css icindeki belirteclerden gelir. Buraya
   '#D4B272' yazildigi gun site ile uygulama sessizce ayrisir.

   Tek istisna: genis ekran icin buyutme. Uygulamanin puntosu telefon
   icindir; masaustunde ayni punto kucuk kalir. Buyutme clamp() ile
   yapilir ve TABANI her zaman uygulamanin kendi degeridir.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-yazi);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

a { color: var(--renk-altin-yazi); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--renk-altin);
  outline-offset: 3px;
  border-radius: var(--kose-cip);
}

img { max-width: 100%; height: auto; }

.kapsayici {
  width: 100%;
  /* 1120px genis (2560px) ekranda icerigi kucuk birakip yanlarda
     genis bosluk birakiyordu (22.08.2026, Ender pat2.png). */
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--sayfa-kenari);
}

/* --- Atlama baglantisi (klavye ve ekran okuyucu) --- */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--renk-yuzey);
  color: var(--renk-yazi);
  padding: var(--bosluk-12) var(--bosluk-16);
  border-radius: var(--kose-dugme);
  z-index: 10;
}
.atla:focus { left: var(--bosluk-16); top: var(--bosluk-16); }

/* --- Ust bilgi --- */
.ust {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--renk-yuzey-menu) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--cizgi) solid var(--renk-ayirici);
}
.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-8) var(--bosluk-16);
  min-height: var(--en-kucuk-dokunma);
  padding-block: var(--bosluk-12);
}
/* Esnek duzende cocuklarin varsayilan alt siniri `auto`dur: kutu
   ICERIGINDEN daha dar olamaz. Menu basliklari uzun oldugu icin
   nav 390 px'in altina inemiyor, sarmalamiyor ve TUM SAYFA
   iceriginden genis kaliyordu - kategori kutucuklari, kart metni ve
   alt bilgi ekrandan tasiyordu. Alt siniri sifirlamak sarmalamayi
   serbest birakir. */
.marka {
  display: flex;
  align-items: center;
  gap: var(--bosluk-16); /* uygulamada logo-yazi arasi: space16 */
  color: inherit;
}
.marka:hover { text-decoration: none; }
.marka-logo { width: var(--marka-logo); height: var(--marka-logo); flex-shrink: 0; }
.marka-yazi span { display: block; }
.marka .y-marka-buyuk { font-size: clamp(20px, 1.6vw, 24px); }

/* Uygulamadaki gibi marka adi ALTIN DEGRADE yazilir (GoldShimmerText'in
   duragan hali; parlama animasyonu sitede bilerek yok). */
.marka-altin {
  background: var(--altin-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-8) var(--bosluk-20);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--en-kucuk-dokunma);
  color: var(--renk-yazi-ikincil);
}
.menu a:hover, .menu a[aria-current='page'] { color: var(--renk-yazi); }

/* --- Hero --- */
.hero {
  padding-block: clamp(var(--bosluk-32), 7vw, 96px);
  border-bottom: var(--cizgi) solid var(--renk-ayirici);
  background:
    radial-gradient(120% 100% at 50% 0%,
      var(--renk-yuzey-sicak) 0%, transparent 60%),
    var(--renk-zemin);
}
/* Acilis sayfasinin hero'su uygulamadakiyle ayni fotografi ayni
   karartmayla tasir (home_hero.dart): fotograf sagda, sol-alt koyu,
   alt kenar sayfa zeminine erir. Karartmalar temel.css belirtecidir. */
.hero-foto {
  position: relative;
  isolation: isolate;
  background-image: url('gorseller/hero_factory.jpg');
  background-size: cover;
  background-position: center right;
}
.hero-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-karartma);
}
/* Dar ekranda yazi fotografin acik bolgesine biner (uygulamadaki hero
   daha uzundur ve yazi koyu bolgede kalir); karartma ayni belirtecin
   ustune bir kez daha bindirilerek koyulastirilir - yeni renk yok. */
@media (max-width: 640px) {
  .hero-foto::before {
    background: var(--hero-karartma), var(--hero-karartma);
  }
}
.hero-foto::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Uygulamada 0.30 yeterliydi cunku hero uzundur; sitede hero kisa
     ve genis ekranda fotografin parlak yol iskilari alt kenardan ince
     bir hat olarak siziyordu (22.08.2026, Ender pat2.png). Gecis daha
     yuksek tutulur ki fotograf zemine TAM erisin. */
  height: clamp(160px, 55%, 340px);
  background: var(--hero-alt-gecis);
}
/* Ayirici cizgi fotografli hero'da cizilmez: fotografin parlak alt
   hattiyla ust uste binince "parlak cizgi" olarak gorunuyordu. */
.hero-foto { border-bottom: none; }
.hero-icerik { position: relative; z-index: 1; }

.hero h1 { margin: 0; font-size: clamp(26px, 4.2vw, 46px); }
.hero .vurgu {
  background: var(--altin-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  margin: var(--bosluk-16) 0 0;
  max-width: 62ch;
  font-size: clamp(12.5px, 1.15vw, 16px);
}
.rozet-satir { display: flex; flex-wrap: wrap; gap: var(--bosluk-8); margin-top: var(--bosluk-24); }
.durum-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-8);
  padding: var(--bosluk-8) var(--bosluk-16);
  border: var(--cizgi) solid var(--renk-cerceve-altin);
  border-radius: var(--kose-hap);
  background: var(--renk-yuzey);
  color: var(--renk-yazi-ikincil);
}
.durum-rozet::before {
  content: '';
  width: var(--bosluk-8);
  height: var(--bosluk-8);
  border-radius: var(--kose-hap);
  background: var(--renk-uyari);
}

/* --- Bolumler --- */
.bolum { padding-block: clamp(var(--bosluk-32), 5vw, 72px); }
.bolum + .bolum { border-top: var(--cizgi) solid var(--renk-ayirici); }
.bolum h2 { margin: 0 0 var(--bosluk-20); font-size: clamp(15px, 1.6vw, 22px); }

/* --- Gomulu ikonlar (uygulamanin MaterialIcons cizimleri) --- */
.ikon {
  width: var(--kategori-ikon);
  height: var(--kategori-ikon);
  display: block;
}

/* --- Deger seridi ---
   Uygulamadaki dort ozellikli serit (hero'nun hemen altinda): tek koyu
   kart, icinde altin ikonlu dort kutucuk. */
.deger-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding: var(--bosluk-8);
  list-style: none;
  background: var(--renk-yuzey);
  border: var(--cizgi) solid var(--renk-cerceve);
  border-radius: var(--kose-kart);
}
.deger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-10);
  padding: var(--bosluk-16) var(--bosluk-12);
  text-align: center;
}
.deger .ikon { color: var(--renk-altin-yazi); }
/* Kutucuk ayiricilari yalniz tek satira sigan genislikte cizilir;
   sarilan izgarada satir basindaki kutunun soluna cizgi duserdi. */
@media (min-width: 640px) {
  .deger + .deger { border-left: var(--cizgi) solid var(--renk-ayirici); }
}
/* Dar ekranda 3+1 gibi dengesiz sarmak yerine 2x2 dizilir
   (uygulamada dort kutucuk tek satirdadir; telefon genisligi web
   yaziliminda buna yetmiyor). */
@media (max-width: 640px) {
  .deger-serit { grid-template-columns: repeat(2, 1fr); }
}

/* --- Kategori kutucuklari ---
   Uygulamadaki Populer Kategoriler seridiyle ayni dil: altin ikonlu
   kare kutu, adi altinda, TIKLANIR (her biri kategori sayfasini acar).
   Uygulamadaki gibi TEK SATIR: dar ekranda yatay kaydirilir, genis
   ekranda tam genislige yayilir (22.08.2026 Ender: kutular kucuk
   kaliyor, ekrani doldurmuyor, tiklanmiyordu). */
.kategori-izgara {
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 0 var(--bosluk-8);
  list-style: none;
}
.kategori { flex: 0 0 auto; }
.kategori-baglanti {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-6); /* uygulamada kutu-ad arasi: space6 */
  text-align: center;
  color: inherit;
}
.kategori-baglanti:hover { text-decoration: none; }
.kategori-baglanti:hover .kategori-kutu,
.kategori-baglanti:focus-visible .kategori-kutu {
  border-color: var(--renk-cerceve-altin);
}
.kategori-kutu {
  display: grid;
  place-items: center;
  width: clamp(var(--kutucuk-boyu), 9vw, 148px);
  height: clamp(var(--kutucuk-boyu), 9vw, 148px);
  background: var(--renk-yuzey-kutucuk);
  border: var(--cizgi) solid var(--renk-cerceve);
  border-radius: var(--kose-kutucuk);
  color: var(--renk-altin-yazi);
}
.kategori-kutu .ikon {
  width: clamp(var(--kategori-ikon), 4vw, 64px);
  height: clamp(var(--kategori-ikon), 4vw, 64px);
}
.kategori-ad { font-size: clamp(9px, 1vw, 16px); color: var(--renk-yazi); }

/* Kategori SAYFASI: baslikta ikon + ad, alt kategoriler kutucuk
   izgarasinda. */
.kategori-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-12);
}
.kategori-baslik .ikon {
  width: clamp(var(--kategori-ikon), 3vw, 44px);
  height: clamp(var(--kategori-ikon), 3vw, 44px);
  color: var(--renk-altin-yazi);
}
.alt-kategori-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--bosluk-12);
  margin: 0 0 var(--bosluk-24);
  padding: 0;
  list-style: none;
}
.alt-kategori {
  padding: var(--bosluk-16);
  background: var(--renk-yuzey-kutucuk);
  border: var(--cizgi) solid var(--renk-cerceve);
  border-radius: var(--kose-kutucuk);
}

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bosluk-16);
}
.kart {
  overflow: hidden; /* fotograf kosede kartin yuvarlagina uyar */
  background: var(--renk-yuzey);
  border: var(--cizgi) solid var(--renk-cerceve);
  border-radius: var(--kose-kart);
}
.kart:hover { border-color: var(--renk-cerceve-altin); }
.kart-foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.kart-icerik { padding: var(--bosluk-20); }
.kart h3 { margin: 0 0 var(--bosluk-8); }
.kart p { margin: 0; color: var(--renk-yazi-ikincil); }

/* Uc esit kartin yerine iki kart + tam genislikte tek panel: izgaranin
   simetrisi bir kez kirilir ve guvenlik metni one cikar (28.08.2026,
   Hallmark denetimi: "3'lu esit kart izgarasi"). Panel dar ekranda tek
   sutuna iner. */
.genis-kart {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin-top: var(--bosluk-16);
}
.genis-kart .kart-foto {
  height: 100%;
  /* Fotograf kendi dogal boyuna uzayip paneli asiri yukseltmesin;
     tavan genis ekranda clamp ile acilir, taban kutucuk olcusudur. */
  max-height: clamp(var(--kutucuk-boyu), 20vw, 300px);
  aspect-ratio: auto;
}
.genis-kart .kart-icerik { align-self: center; }
@media (max-width: 640px) {
  .genis-kart { grid-template-columns: minmax(0, 1fr); }
  .genis-kart .kart-foto { aspect-ratio: 16 / 10; min-height: 0; }
}

/* --- Icerik (kurumsal sayfalar) --- */
.icerik { padding-block: clamp(var(--bosluk-24), 4vw, 56px); }
.icerik h1 { margin: 0 0 var(--bosluk-24); font-size: clamp(20px, 2.6vw, 32px); }
.icerik h2 { margin: var(--bosluk-32) 0 var(--bosluk-12); font-size: clamp(15px, 1.5vw, 20px); }
.icerik p { max-width: 74ch; margin: 0 0 var(--bosluk-12); }
.icerik ul { max-width: 74ch; margin: 0 0 var(--bosluk-12); padding-left: var(--bosluk-20); }
.icerik li { margin-bottom: var(--bosluk-8); }
/* Madde isaretleri uygulamadaki gibi altin (kurumsal sayfalar). */
.icerik li::marker { color: var(--renk-altin-yazi); }

.uyari-kutu {
  padding: var(--bosluk-20);
  background: var(--renk-yuzey-sicak);
  border: var(--cizgi) solid var(--renk-cerceve-altin);
  border-radius: var(--kose-kart);
  margin-bottom: var(--bosluk-24);
}

/* --- Alt bilgi --- */
.alt {
  padding-block: var(--bosluk-32);
  border-top: var(--cizgi) solid var(--renk-ayirici);
  background: var(--renk-yuzey-cukur);
}
/* Link sutunlari + ayri telif cubugu yerine tek satirlik kunye: marka
   solda, butun baglantilar sagda akar (28.08.2026, Hallmark denetimi:
   "yapay zeka alt bilgisi"). Hicbir baglanti kaldirilmadi. */
.alt-kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bosluk-20) var(--bosluk-32);
}
.alt-marka { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.alt-baglantilar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-8) var(--bosluk-20);
  max-width: 74ch;
}
/* Baglanti yazisi iki satira BOLUNMEZ: yarim satirlik tiklama hedefi
   hem gorsel hem dokunma hatasidir. */
.alt a {
  white-space: nowrap;
  color: var(--renk-yazi-ikincil);
  padding-block: var(--bosluk-4);
}
.alt a:hover { color: var(--renk-yazi); }

/* --- Genis ekran buyutmesi ---
   22.08.2026 (Ender, pat2.png): 2560px ekranda deger seridi, kategori
   kutuculari ve yazilari telefon olculerinde kalip kucuk gorunuyordu.
   Kural bozulmaz: TABAN her zaman uygulamanin kendi degeri
   (belirtec ya da temel.css'teki punto); buyume yalniz genis ekranda
   clamp() ile devreye girer. */
.deger .ikon {
  width: clamp(var(--kategori-ikon), 2.6vw, 42px);
  height: clamp(var(--kategori-ikon), 2.6vw, 42px);
}
/* y-etiket tabani 9px - telefon olcusu; genis ekranda okunur boyuta
   cikar. (Kategori seridinin kendi kurallari yukarida, tek yerde.) */
.deger .y-etiket { font-size: clamp(9px, 0.75vw, 14px); }
.deger { padding: clamp(var(--bosluk-16), 1.8vw, 32px) var(--bosluk-12); }
.kart-icerik { padding: clamp(var(--bosluk-20), 1.6vw, 32px); }
.kart .y-kart-baslik { font-size: clamp(12px, 0.95vw, 17px); }
.kart .y-govde { font-size: clamp(14px, 0.9vw, 16.5px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}