/* Terrakap — tek stylesheet. Harici font yok (Montserrat kendi
   sunucumuzdan), ikon fontu yok, framework yok.

   DUNYA (14 Eyl 2026, eatnaked.co referansiyla bastan): KOYU TOPRAK.
   60-30-10: %60 koyu toprak zemin, %30 krem kagit yuzeyler ve yesil,
   %10 gok mavisi eylem rengi. Yazi her yerde Montserrat.
   Referansin yavas acilisinin tersi hedeflendi: on yukleyici yok,
   kritik yol kucuk. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-degisken-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-degisken-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 60: koyu toprak. Filmin kendi siyahi rgb(8,4,0); zemin ona komsu
     secildi ki panel sayfaya dikissiz otursun. */
  --zemin:      #171009;
  --zemin-ust:  #221a11;
  --cam:        rgb(243 236 221 / 5%);
  --cam-cizgi:  rgb(243 236 221 / 14%);
  /* 30: krem kagit + yesil. Urun fotograflari beyaz fonlu; krem plaka
     ustunde carpma (multiply) ile eriyor. */
  --kagit:      #f3ecdd;
  --kagit-koyu: #e7dcc4;
  --metin:      #f3ecdd;
  --metin-soluk:#bfb29a;
  --murekkep:   #241c12;   /* kagit ustundeki yazi */
  --murekkep-soluk:#6d5f49;
  --cizgi:      rgb(243 236 221 / 14%);
  --yesil:      #97c66b;   /* koyu zeminde parlak yaprak: 8.2:1 */
  --yesil-koyu: #55892f;   /* kagit ustunde yesil */
  --yesil-zemin:#26361a;
  --yesil-murekkep:#44742a; /* kagit ustunde YAZI olan yesil: 4.7:1 (yesil-koyu 3.6 kaliyordu) */
  --yesil-solgun: rgb(151 198 107 / 12%);
  /* 10: gok mavisi, yalniz eylem. */
  --gok:        #7db9e3;   /* koyu zeminde baglanti/parlama */
  --gok-buton:  #2c7ab0;   /* beyaz yaziyla 4.65:1 (eski #2f7fb6 4.35 idi, AA altinda) */
  --gok-koyu:   #266b9c;
  --golge: 0 2px 6px rgb(0 0 0 / 35%), 0 18px 48px rgb(0 0 0 / 45%);
  --en: 1180px;
  --yuvarlak: 14px;
}

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

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

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--metin);
  background: var(--zemin);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gok); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #a3cfec; }
::selection { background: var(--yesil-koyu); color: #fff; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

.sarmal { width: min(100% - 2.5rem, var(--en)); margin-inline: auto; }
.dar    { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

:focus-visible { outline: 3px solid var(--gok); outline-offset: 2px; border-radius: 4px; }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gok-buton); color: #fff; padding: .7rem 1.2rem;
}
.atla:focus { left: 0; }

/* ---------- Butonlar: hap bicimi, eylem GOK ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .82rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit; letter-spacing: .01em;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-ana { background: var(--gok-buton); color: #fff; box-shadow: 0 6px 24px rgb(47 127 182 / 35%); }
.btn-ana:hover { background: var(--gok-koyu); color: #fff; box-shadow: 0 8px 30px rgb(47 127 182 / 50%); }
.btn-cizgi { border-color: var(--cam-cizgi); color: var(--metin); background: var(--cam); }
.btn-cizgi:hover { border-color: var(--yesil); color: var(--yesil); }
.btn-blok { width: 100%; justify-content: center; }

/* ---------- Baslik / gezinme ---------- */
/* Tum site koyu: serit her sayfada ayni, acik/koyu dikis derdi bitti.
   Eski scroll-timeline gecisi bu yuzden SILINDI. */

.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgb(23 16 9 / 82%); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 1rem; height: 76px; }
/* Logo koyu zeminde: filtre (invert + hue-rotate) yerine yerelde uretilmis
   acik varyant (logo-yatay-acik): amblem --yesil, yazi --kagit. Filtre
   markanin yesilini soluk bir pastele ceviriyordu. */
.logo img { width: 158px; height: auto; }

.menu { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.menu a {
  padding: .5rem .85rem; border-radius: 999px; text-decoration: none;
  color: var(--metin-soluk); font-size: .94rem; font-weight: 600;
}
.menu a:hover { background: var(--cam); color: var(--metin); }
.menu a[aria-current="page"] { color: var(--yesil); }

.teklif-btn { position: relative; }
.menu .teklif-btn { color: #fff; margin-left: .4rem; }
.teklif-sayac {
  display: none; position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--yesil); color: #10240a; font-size: .72rem; font-weight: 800;
  line-height: 19px; text-align: center;
}
.teklif-sayac.dolu { display: block; }

.menu-ac {
  display: none; margin-left: auto; background: none; border: 0;
  padding: .5rem; cursor: pointer; color: var(--metin);
}

@media (max-width: 860px) {
  .menu-ac { display: block; }
  .menu {
    position: fixed; inset: 76px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--zemin-ust); border-bottom: 1px solid var(--cizgi);
    padding: .5rem 1.25rem 1.25rem; box-shadow: var(--golge);
    display: none;
  }
  .menu.acik { display: flex; }
  .menu a { padding: .8rem .4rem; border-bottom: 1px solid var(--cizgi); border-radius: 0; color: var(--metin); }
  .menu .btn { margin-top: .8rem; justify-content: center; border-radius: 999px; border-bottom: 0; padding: .82rem 1.6rem; color: #fff; }
}

/* ---------- Sag ray: ana sayfanin bolum pusulasi ---------- */
/* eatnaked'in sag kenar rayi. Yalniz ana sayfada ve genis ekranda;
   JS kaydirmayi izler, aktif bolumu isaretler. */

.ray {
  position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%);
  z-index: 30; display: none;
}
@media (min-width: 1360px) { .ray { display: block; } }
.ray ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ray a {
  display: flex; align-items: center; justify-content: flex-end; gap: .55rem;
  color: var(--metin-soluk); text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
}
.ray a::after {
  content: ""; width: 34px; height: 2px; border-radius: 1px;
  background: var(--cizgi);
  transform: scaleX(.62); transform-origin: right center;
  transition: background .2s, transform .2s;
}
.ray a:hover { color: var(--metin); }
.ray a[aria-current="true"] { color: var(--yesil); }
.ray a[aria-current="true"]::after { background: var(--yesil); transform: scaleX(1); }

/* ---------- Hero (ic sayfa girisleri) ---------- */

.hero { background: var(--zemin-ust); border-bottom: 1px solid var(--cizgi); }
.hero-ic {
  display: grid; gap: 2.5rem; align-items: center;
  padding: 4rem 0 3rem; grid-template-columns: 1fr;
}
.hero h1 { margin-bottom: .35em; }
.hero .ozet { font-size: 1.1rem; color: var(--metin-soluk); max-width: 46ch; }
.hero .ozet strong { color: var(--metin); font-weight: 700; }
.hero-btn { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.6rem; }
.hero-bag { font-weight: 600; font-size: .95rem; }
.btn-sira { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-gorsel img { border-radius: var(--yuvarlak); box-shadow: var(--golge); }

.hero-olcut {
  display: grid; gap: 1rem 1.5rem; margin: 0; padding: 0 0 3rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--cizgi); padding-top: 1.6rem;
}
.hero-olcut dt { font-weight: 800; font-size: 1.05rem; color: var(--yesil); font-variant-numeric: tabular-nums; }
.hero-olcut dd { margin: .15rem 0 0; font-size: .88rem; color: var(--metin-soluk); }

@media (min-width: 880px) {
  .hero-ic { grid-template-columns: 1fr 1.1fr; padding: 6rem 0 4rem; min-height: 74vh; }
}

/* ---------- Ticari seffaflik seridi ---------- */

.ticari { background: var(--yesil-zemin); color: var(--metin); }
.ticari-ic {
  display: grid; gap: 1.5rem 2rem; padding: 1.9rem 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ticari dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
             color: var(--yesil); font-weight: 700; }
.ticari dd { margin: .25rem 0 0; font-size: 1.02rem; font-weight: 600; }

/* ---------- Bolum ---------- */

.bolum { padding: 4rem 0; }
.bolum-alt { background: var(--zemin-ust); }
/* Yalniz baslik tasiyan giris bolumu ayni zeminli bolumle ardisik gelince
   iki 4rem ic bosluk ust uste biniyordu (urunler: ~200px bos alan). */
.bolum:has(> .sarmal > .bolum-bas:only-child) + .bolum:not(.bolum-alt) { padding-top: 0; }

.hata { padding-block: 2rem 1rem; }
.hata-kod {
  font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 800; line-height: 1;
  color: var(--yesil); margin: 0 0 .5rem; letter-spacing: -.03em;
}
.hata .hero-btn { margin: 1.6rem 0 2.4rem; }
.hata h2 { font-size: 1.05rem; margin-bottom: .6rem; }

.bolum-bas { max-width: 62ch; margin-bottom: 2.2rem; }
.bolum-bas p { color: var(--metin-soluk); margin: 0; }

/* ---------- Kartlar ---------- */

.izgara {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* Yazi kartlari metin tasir; 210px'lik urun izgarasinda satir 20 karakterde kiriliyordu. */
.izgara-yazi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.izgara-dort, .avantaj, .belge-sutunlar {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1000px) {
  .izgara-dort, .avantaj, .belge-sutunlar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .izgara-dort, .avantaj, .belge-sutunlar { grid-template-columns: minmax(0, 1fr); }
}

/* Urun karti: krem plaka koyu odada isik alan raf gibi. Fotograf beyaz
   fonlu; krem uzerinde multiply ile eriyor, kesik kenar kalmiyor. */
.kart {
  display: flex; flex-direction: column;
  background: var(--cam); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kart:hover { border-color: var(--yesil); box-shadow: var(--golge); transform: translateY(-3px); }
/* Gorsel akistan cikarildi: buyuk kaynakli fotograf kutuyu esir alip
   bir karti komsularindan uzun yapiyordu. Kutu artik yalniz oranla olculur. */
.kart-gorsel { position: relative; aspect-ratio: 1; background: var(--kagit); display: block; }
.kart-gorsel img {
  position: absolute; inset: .9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem);
  object-fit: contain; mix-blend-mode: multiply;
}
.kart-govde { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.kart-govde h3 { font-size: 1rem; margin-bottom: .3rem; }
.kart-govde h3 a { color: inherit; text-decoration: none; }
.kart-govde h3 a:hover { color: var(--yesil); }
.kart-kod { font-size: .8rem; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.kart-cip { margin: .5rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--metin-soluk); }
.kart-cip::before { content: "✓ "; color: var(--yesil); font-weight: 800; }
.kart-alt { margin-top: auto; padding-top: .8rem; }

/* Kategori kartlari */
.kat-kart {
  position: relative; display: flex; flex-direction: column; padding: 1.6rem;
  background: var(--cam); border: 1px solid var(--cam-cizgi); border-radius: var(--yuvarlak);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kat-kart:hover { border-color: var(--yesil); box-shadow: var(--golge); color: inherit; transform: translateY(-3px); }
.kat-kart h3 { margin-bottom: .35rem; }
.kat-kart h3 a { color: inherit; text-decoration: none; }
.kat-kart h3 a:hover { color: var(--yesil); }
.kat-kart p { color: var(--metin-soluk); font-size: .92rem; margin: 0; }
.kat-kart .sayi {
  font-size: .82rem; color: var(--yesil); font-weight: 700;
  margin-top: auto; padding-top: .6rem; display: block;
}

/* Avantaj kutulari */
.avantaj-kutu {
  display: flex; flex-direction: column; padding: 1.6rem;
  background: var(--cam); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak);
}
.avantaj-kutu h3 { font-size: 1.02rem; margin-bottom: .3rem; }
@supports (height: 1lh) { .avantaj-kutu h3 { min-height: 2lh; } }
.avantaj-kutu p { color: var(--metin-soluk); font-size: .93rem; margin: 0; }
.avantaj-ikon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: .9rem;
  background: var(--yesil-solgun); color: var(--yesil);
  display: grid; place-items: center;
}
.avantaj-ikon svg { width: 22px; height: 22px; }

/* ---------- Urun sayfasi ---------- */

.urun-ust { display: grid; gap: 2.5rem; padding: 2.5rem 0; grid-template-columns: 1fr; }
@media (min-width: 880px) { .urun-ust { grid-template-columns: 1fr 1fr; } }

.galeri-ana {
  position: relative;
  background: var(--kagit); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak); padding: 1.5rem;
  display: grid; place-items: center; aspect-ratio: 1;
}
.galeri-ana img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.galeri-kucuk { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.galeri-kucuk button {
  width: 68px; height: 68px; padding: .35rem; cursor: pointer;
  background: var(--kagit); border: 2px solid transparent;
  border-radius: 10px; display: grid; place-items: center;
}
.galeri-kucuk button[aria-selected="true"] { border-color: var(--yesil); }
.galeri-kucuk img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.urun-kod {
  display: inline-block; font-size: .82rem; font-weight: 700;
  color: var(--yesil); background: var(--yesil-solgun);
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .8rem;
  font-variant-numeric: tabular-nums;
}
.urun-ozet { font-size: 1.05rem; color: var(--metin-soluk); }
.urun-madde { margin: 1.3rem 0; padding: 0; list-style: none; }
.urun-madde li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .97rem; }
.urun-madde li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--yesil);
}
.urun-eylem { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.ozellik-tablo { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ozellik-tablo th, .ozellik-tablo td {
  text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.ozellik-tablo th { font-weight: 600; color: var(--metin-soluk); width: 45%; }
.ozellik-tablo td { font-weight: 600; }
.ozellik-tablo tr:last-child th, .ozellik-tablo tr:last-child td { border-bottom: 0; }

.veri-yok { color: var(--metin-soluk); font-style: italic; font-size: .9rem; }
.tablo-not { margin-top: .7rem; font-size: .85rem; color: var(--metin-soluk); }

/* ---------- Katalog ---------- */

.katalog-indir { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.katalog-atla {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .5rem; padding: 0; list-style: none;
}
.katalog-atla a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .55rem .45rem .95rem; border: 1px solid var(--cam-cizgi);
  border-radius: 999px; background: var(--cam); color: var(--metin);
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.katalog-atla a:hover { border-color: var(--yesil); color: var(--yesil); }
.katalog-atla .sayi {
  min-width: 1.55rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--yesil-solgun); color: var(--yesil);
  font-size: .78rem; font-weight: 800; line-height: 1.55rem; text-align: center;
  font-variant-numeric: tabular-nums;
}

.katalog-grup { margin-top: 3.25rem; scroll-margin-top: 92px; }
.katalog-grup-bas { margin-bottom: 1.4rem; }
.katalog-grup-satir {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .25rem 2rem;
}
.katalog-grup-etiket {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--metin-soluk);
}
.katalog-grup-no {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px;
  border-radius: 8px; background: var(--yesil-solgun); color: var(--yesil);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.katalog-grup h2 { margin: 0 0 .4rem; text-wrap: balance; }
.katalog-grup-giris { margin: .35rem 0 0; max-width: 78ch; color: var(--metin-soluk); font-size: .95rem; }
.katalog-grup-bag { font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.katalog-grup-bag:hover { text-decoration: underline; }
.katalog-dipnot { margin-top: 1.4rem; font-size: .88rem; color: var(--metin-soluk); }

.tablo-kaydir { overflow-x: auto; border: 1px solid var(--cam-cizgi); border-radius: var(--yuvarlak); background: var(--zemin-ust); }
.katalog-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; }
.katalog-tablo th, .katalog-tablo td { padding: .68rem .85rem; border-bottom: 1px solid var(--cizgi); text-align: left; }
.katalog-tablo thead th {
  background: rgb(0 0 0 / 25%);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--metin-soluk); font-weight: 700;
}
.katalog-tablo tbody tr:last-child td { border-bottom: 0; }
.katalog-tablo tbody tr:hover { background: var(--yesil-solgun); }
.katalog-tablo td.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.katalog-tablo th.sayi { text-align: right; }
.katalog-tablo td.kod { font-variant-numeric: tabular-nums; color: var(--metin-soluk); }
.katalog-tablo .ad a { text-decoration: none; font-weight: 600; color: var(--metin); }
.katalog-tablo .ad a:hover { color: var(--gok); text-decoration: underline; }

/* ---------- Teklif listesi ---------- */

.teklif-satir {
  display: grid; gap: 1rem; align-items: center; padding: 1rem 0;
  border-bottom: 1px solid var(--cizgi);
  grid-template-columns: 64px 1fr auto auto;
}
.teklif-satir img { width: 64px; background: var(--kagit); border-radius: 8px; }
.teklif-satir input[type="number"] { width: 92px; }
.teklif-bos { padding: 3rem 0; text-align: center; color: var(--metin-soluk); }

.bildirim {
  position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  align-items: center; justify-content: center;
  margin: 0 auto; max-width: 30rem;
  padding: .85rem 1.1rem; border-radius: var(--yuvarlak);
  background: var(--kagit); color: var(--murekkep); box-shadow: var(--golge);
  font-size: .93rem;
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.bildirim.acik { opacity: 1; transform: none; pointer-events: auto; }
.bildirim a { color: var(--yesil-murekkep); font-weight: 700; white-space: nowrap; }

label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
input, textarea, select {
  width: 100%; padding: .72rem .9rem; font: inherit; font-size: .97rem;
  border: 1.5px solid var(--cam-cizgi); border-radius: 10px;
  background: var(--zemin-ust); color: var(--metin);
}
input::placeholder, textarea::placeholder { color: var(--metin-soluk); }
input:focus, textarea:focus, select:focus {
  border-color: var(--gok); outline: none; box-shadow: 0 0 0 3px rgb(125 185 227 / 22%);
}
/* Hata hali: yalniz kullanici dokunduktan sonra. Kiremit, eylem mavisiyle karismaz. */
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: #e0876a; }
input:user-invalid:focus, textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgb(224 135 106 / 22%); }
.alan { margin-bottom: 1.1rem; }
.alan-ikili { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .alan-ikili { grid-template-columns: 1fr 1fr; } }
.form-not { font-size: .87rem; color: var(--metin-soluk); margin-top: -.6rem; }

.form-tamam {
  padding: 1.5rem; border: 1.5px solid var(--yesil); border-radius: var(--yuvarlak);
  background: var(--yesil-solgun);
}

/* ---------- Ureticinin sertifikalari ---------- */

#sertifikalar { scroll-margin-top: 76px; }

.belge-sutun-ad {
  margin-bottom: .9rem; text-align: center;
  font-size: .9rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--yesil);
}
.belge-yigin {
  display: flex; flex-direction: column; gap: .55rem;
  height: clamp(380px, 44vw, 620px);
}
.belge {
  flex: 1; min-height: 0; display: block; line-height: 0;
  border-radius: 8px; overflow: hidden; background: var(--kagit);
  box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
  transition: box-shadow .18s ease, transform .18s ease;
}
.belge img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.belge:hover { transform: translateY(-3px); box-shadow: var(--golge); }

/* ---------- Iletisim ---------- */

.bolum-sik { padding-bottom: 0; }
.bag-dis { display: inline-block; margin-top: .5rem; font-weight: 600; }

.iletisim-ikili { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iletisim-kart {
  margin: 0; display: flex; flex-direction: column; gap: 1.3rem;
  padding: 1.6rem; background: var(--cam);
  border: 1px solid var(--cam-cizgi); border-radius: var(--yuvarlak);
}
.iletisim-kart > div + div { padding-top: 1.3rem; border-top: 1px solid var(--cizgi); }
.iletisim-kart dt {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yesil); font-weight: 800; margin-bottom: .6rem;
}
.iletisim-kart dd { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.iletisim-kart dd a { text-decoration: none; font-weight: 600; }
.iletisim-kart dd a:hover { text-decoration: underline; }
.iletisim-kart .bag-dis { display: inline-block; margin-top: .6rem; font-size: .92rem; }
@media (max-width: 620px) { .iletisim-ikili { grid-template-columns: 1fr; } }

/* ---------- Kaynar su testi ---------- */

.test-ic { display: grid; gap: 2rem; }
@media (min-width: 880px) {
  .test-ic { grid-template-columns: 5fr 6fr; gap: 3rem; align-items: center; }
  .test-ic .bolum-bas { margin-bottom: 1.4rem; }
}
.test-olcut {
  display: grid; gap: 1rem 1.5rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--cizgi); padding-top: 1.4rem;
}
.test-olcut dt { font-weight: 800; font-size: 1.02rem; color: var(--yesil); font-variant-numeric: tabular-nums; }
.test-olcut dd { margin: .15rem 0 0; font-size: .88rem; color: var(--metin-soluk); }

/* Grafik krem kagit plaka ustunde: veri okunur, dunya bolunmez. */
.test-grafik {
  position: relative; overflow: clip; /* gizli olcum tablosu mobilde yatay tasma yapiyordu */
  margin: 0; background: var(--kagit); color: var(--murekkep);
  border-radius: var(--yuvarlak); padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--golge);
}
.test-grafik figcaption { margin-top: .6rem; font-size: .88rem; color: var(--murekkep-soluk); }
.test-svg { display: block; width: 100%; height: auto; }
.test-svg text { fill: var(--murekkep-soluk); font-size: 15px; font-variant-numeric: tabular-nums; }
.test-svg .kilavuz { stroke: rgb(36 28 18 / 15%); stroke-width: 1; }
.test-svg .dolgu { fill: var(--yesil-koyu); opacity: .12; }
.test-svg .egri { fill: none; stroke: var(--yesil-koyu); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.test-svg .nokta { fill: var(--yesil-koyu); stroke: var(--kagit); stroke-width: 2; }
.test-svg .deger { fill: var(--murekkep); font-size: 19px; font-weight: 700; }

/* ---------- Tanitim ---------- */

.tanitim-ic { display: grid; gap: 2rem; }
@media (min-width: 880px) {
  .tanitim-ic { grid-template-columns: 6fr 5fr; gap: 3rem; align-items: start; }
  .tanitim-ic .bolum-bas { margin-bottom: 1.4rem; }
}
.tanitim-yazi { max-width: 62ch; }
.tanitim-yazi p { margin: 0 0 1rem; }
.tanitim-yazi p:last-child { margin-bottom: 0; }

.foy {
  background: var(--cam); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak); padding: 1.4rem;
}
.foy-bas {
  margin: 0 0 .8rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--cizgi);
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--yesil);
}
.foy .ozellik-tablo { font-size: .92rem; }
.foy-dip { margin-top: .9rem; font-size: .88rem; color: var(--metin-soluk); }
.foy-dip p { margin: 0; }

/* ---------- Sik sorulan sorular ---------- */

.sss-liste { display: grid; gap: .75rem; max-width: 72ch; }
.sss details {
  background: var(--cam); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak);
}
.sss summary {
  cursor: pointer; padding: 1rem 1.25rem; font-weight: 700;
  list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: "+"; flex: none; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--yesil-solgun); color: var(--yesil);
  font-weight: 700; line-height: 1;
}
.sss details[open] summary::after { content: "–"; }
.sss .sss-cevap { padding: 0 1.25rem 1.1rem; color: var(--metin-soluk); }
.sss .sss-cevap p { margin: 0; }
.sss .sss-cevap p + p { margin-top: .5rem; }

/* ---------- Film ---------- */

.film { margin: 0; }
.film video {
  display: block; width: 100%; height: auto;
  background: #080400; border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
}
.film figcaption { margin-top: .8rem; font-size: .88rem; color: var(--metin-soluk); }

/* ---------- Galeri ---------- */

.galeri-izgara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.galeri-izgara figure { margin: 0; }
.galeri-izgara img { border-radius: var(--yuvarlak); width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ---------- Yazi (blog / statik sayfa) ---------- */

.yazi { padding: 2.5rem 0 3.5rem; }
.yazi h2 { margin-top: 2rem; }
.yazi h3 { margin-top: 1.5rem; }
.yazi ul, .yazi ol { padding-left: 1.3rem; }
.yazi li { margin-bottom: .4rem; }
.yazi blockquote {
  margin: 1.8rem 0; padding: 1.1rem 1.4rem;
  background: var(--cam); border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak);
  font-size: 1.06rem; color: var(--metin);
}
.yazi blockquote p:last-child { margin: 0; }
.yazi code {
  padding: .1em .35em; border-radius: 4px;
  background: var(--zemin-ust); border: 1px solid var(--cam-cizgi);
  font-size: .88em; word-break: break-word;
}
.yazi-tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.yazi-tablo th, .yazi-tablo td {
  padding: .6rem .8rem; border-bottom: 1px solid var(--cizgi);
  text-align: left; vertical-align: top;
}
.yazi-tablo thead th {
  background: rgb(0 0 0 / 25%);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--metin-soluk); font-weight: 700; white-space: nowrap;
}
.yazi-tablo tbody tr:last-child td { border-bottom: 0; }
.yazi .tablo-kaydir { margin: 0 0 1.4rem; }
.yazi-tarih { color: var(--metin-soluk); font-size: .9rem; }

.yol { font-size: .87rem; color: var(--metin-soluk); padding: 1rem 0 0; }
.yol a { color: var(--metin-soluk); }
.yol span { margin: 0 .4rem; opacity: .5; }

/* ---------- Alt bilgi ---------- */

.alt {
  position: relative;
  background: #100b06; color: var(--metin-soluk); margin-top: 4rem;
  padding: 3rem 0 1.5rem; font-size: .93rem;
  border-top: 1px solid var(--cizgi);
}
.alt-ic { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 1040px) { .alt-ic { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.7fr; } }
.alt h4 { color: var(--metin); font-size: .95rem; margin-bottom: .7rem; }
.alt a { color: var(--metin-soluk); text-decoration: none; }
.alt a:hover { color: var(--metin); text-decoration: underline; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: .4rem; }
.alt-logo img { width: 150px; height: auto; margin-bottom: .9rem; }
.alt-adres li { margin-bottom: .9rem; line-height: 1.5; }
.alt-adres li:last-child { margin-bottom: 0; }
.alt-adres b {
  display: block; margin-bottom: .15rem; color: var(--yesil);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.alt-son {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cizgi);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center;
  font-size: .86rem; color: var(--metin-soluk);
  padding-right: 7rem;
}
.alt-muhur-bag {
  position: absolute; right: 1.25rem; bottom: 1rem;
  display: inline-flex; line-height: 0; border-radius: 8px;
  transition: opacity .15s;
}
.alt-muhur-bag:hover { opacity: .72; }
.alt-muhur-bag:focus-visible { outline: 2px solid var(--yesil); outline-offset: 3px; }
/* Muhur oldugu gibi: filtre denendi, kediyi karanlik bir topa ceviriyordu.
   Acik zeminli damga koyu zeminde kendi kagidiyla durur. */
.alt-muhur { height: 64px; width: auto; display: block; border-radius: 8px; }

/* ---------- Cerez kutusu ---------- */

/* Alt ortada ekranin kenarina yapisik kucuk serit. Sayfadaki yuzen
   etiketlerin ve kahraman sahnesinin ustunde kalsin diye katmani yuksek. */
.cerez-bant {
  position: fixed; z-index: 1000; left: 50%; bottom: 0;
  display: flex; align-items: center; gap: .6rem;
  width: max-content; max-width: calc(100% - 1.5rem);
  padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom)) .85rem;
  border-radius: 14px 14px 0 0;
  background: var(--kagit); color: var(--murekkep); box-shadow: 0 -4px 18px rgb(0 0 0 / 35%);
  font-size: .76rem; line-height: 1.35;
  opacity: 0; transform: translate(-50%, 100%);
  transition: opacity .18s ease, transform .18s ease;
}
.cerez-bant.acik { opacity: 1; transform: translate(-50%, 0); }
.cerez-bant p { margin: 0; }
.cerez-bant a { color: var(--yesil-murekkep); white-space: nowrap; }
.cerez-bant-dugme { display: flex; gap: .3rem; flex: none; }
.cerez-bant .btn { padding: .32rem .8rem; font-size: .8rem; border-width: 1px; }
.cerez-bant .btn.cerez-simge {
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; min-height: 0;
  padding: 0; border-radius: 50%;
}
.cerez-simge svg { width: .7rem; height: .7rem; }
/* Serit acikken teklif bildirimi onun ustune cikar, ust uste binmesinler. */
body:has(.cerez-bant) .bildirim { bottom: 4.5rem; }
@media (max-width: 820px) {
  .cerez-bant .btn.cerez-simge { width: 1.75rem; height: 1.75rem; }
}
.cerez-bant .btn-cizgi { color: var(--murekkep); background: none; border-color: rgb(36 28 18 / 40%); }
.cerez-bant .btn-cizgi:hover { color: var(--kagit); background: var(--murekkep); }

.cerez-ayar {
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
  color: var(--metin-soluk); text-decoration: none;
}
.cerez-ayar:hover { color: var(--metin); text-decoration: underline; }

/* ---------- Yardimcilar ---------- */

.gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.merkez { text-align: center; }
.bosluk-ust { margin-top: 1.5rem; }

/* `prefers-reduced-motion` dinlenmiyor (27 Agu 2026, kullanicinin karari;
   gerekcesi eski surumde yazili, karar degismedi). */

@media print {
  .ust, .alt, .urun-eylem, .hero-btn, .cerez-bant, .ray { display: none; }
  body { font-size: 12pt; background: #fff; color: #000; }
}

/* ---------- Panel: tek sahne, degisen yazilar ---------- */
/* Mekanik ayni kaldi (guvenli varsayilan: duragan akis; JS [data-surulur]
   takinca kaydirmali sahne). Dunya degisti: sahne artik sayfanin geri
   kalaniyla ayni karanligi paylasiyor, dikis yok. */

.panel { position: relative; background: #080400; }
.panel-sahne { position: relative; overflow: hidden; background: #080400; }
.panel-poster { display: none; }
:root[data-surulur] .panel-poster { display: block; }
.panel-video { display: none; }
:root[data-surulur] .panel-video { display: block; }
.panel-metin { background: #080400; padding-block: 3rem 3.5rem; }
:root[data-surulur] .panel-metin { background: none; padding-block: 0; }
.panel-bant { padding-block: 2.2rem; border-top: 1px solid rgb(255 255 255 / 14%); }
.panel-bant:first-child { border-top: 0; padding-top: 0; }
.panel-bant-kare {
  display: block; width: 100%; height: auto;
  margin: 0 0 1.5rem; border-radius: var(--yuvarlak);
}
.panel-perde, .panel-kaydir { display: none; }

:root[data-surulur] .panel { height: 420svh; }
:root[data-surulur] .panel-sahne { position: sticky; top: 0; height: 100svh; min-height: 540px; }
:root[data-surulur] .panel-poster,
:root[data-surulur] .panel-video {
  position: absolute; top: 50%; right: -4%;
  height: 132%; width: auto; max-width: none;
  transform: translateY(-50%);
}
:root[data-surulur] .panel-bant { padding-block: 0; border-top: 0; }
:root[data-surulur] .panel-bant-kare { display: none; }
:root[data-surulur] .panel-perde { display: block; }
@media (max-width: 1100px) {
  :root[data-surulur] .panel-poster,
  :root[data-surulur] .panel-video { right: -16%; height: 116%; }
}
.panel-video { opacity: 0; transition: opacity .62s cubic-bezier(.22,.61,.36,1); }
.panel.video-hazir .panel-video { opacity: 1; }
.panel.video-hazir .panel-poster { opacity: 0; transition: opacity .62s cubic-bezier(.22,.61,.36,1); }

.panel-perde {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(90deg,
      #080400 0%, rgb(8 4 0 / 96%) 22%, rgb(8 4 0 / 78%) 38%,
      rgb(8 4 0 / 34%) 52%, rgb(8 4 0 / 6%) 68%, rgb(8 4 0 / 0) 82%),
    linear-gradient(180deg,
      rgb(8 4 0 / 86%) 0, rgb(8 4 0 / 72%) 58px, rgb(8 4 0 / 34%) 112px,
      rgb(8 4 0 / 0) 200px),
    linear-gradient(180deg, rgb(8 4 0 / 0) 72%, rgb(8 4 0 / 52%) 100%);
}

/* eatnaked imzasi: sahnenin arkasinda kesik cizgili halkalar. Susleme
   degil pusula: filmin sabit durdugunu, yazinin aktigini hissettirir. */
.panel-sahne::before {
  content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 30% 50%, transparent 23.8%, rgb(243 236 221 / 5%) 24%, transparent 24.3%),
    radial-gradient(circle at 30% 50%, transparent 37.8%, rgb(243 236 221 / 4%) 38%, transparent 38.3%),
    radial-gradient(circle at 30% 50%, transparent 51.8%, rgb(243 236 221 / 3%) 52%, transparent 52.3%);
}

.panel-metin {
  position: relative; z-index: 4;
  display: block;
  width: min(100% - 2.5rem, var(--en)); margin-inline: auto;
}
:root[data-surulur] .panel-metin { height: 100%; display: grid; align-items: center; }
.panel-bant {
  grid-area: 1 / 1;
  max-width: 46ch;
  opacity: var(--gorunur, 1);
  transform: translateY(calc((1 - var(--gorunur, 1)) * 10px));
  pointer-events: none;
}
.panel-bant[data-acik] { pointer-events: auto; }
:root[data-surulur] .panel-bant { opacity: var(--gorunur, 0); }
:root[data-surulur] .panel-bant:first-child { opacity: var(--gorunur, 1); }

.panel-kunye {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1.1rem;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yesil); font-weight: 700;
}
.panel-kunye::after {
  content: ""; width: clamp(40px, 7vw, 110px); height: 1px;
  background: var(--yesil); opacity: .5;
}
.panel h1 {
  color: var(--metin); font-size: clamp(2.2rem, 1rem + 4.4vw, 5.5rem); font-weight: 900;
  line-height: 1; max-width: 16ch; margin: 0 0 1.1rem;
  letter-spacing: -.035em; text-wrap: balance;
}
.panel h2 {
  color: var(--metin); font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
  line-height: 1.08; max-width: 15ch; margin: 0 0 1rem; letter-spacing: -.025em;
}
.panel-ozet, .panel-yazi {
  color: #ddd3c0; font-size: 1.05rem; line-height: 1.7;
  max-width: 46ch; margin: 0 0 1.5rem;
}
.panel-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 2.2rem; }
.panel-olcu { margin: 0; font-size: .9rem; letter-spacing: .05em; color: var(--yesil); font-weight: 700; }

@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .panel-bant { opacity: 1 !important; transform: none !important; pointer-events: auto; max-width: none; }
}

@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  :root[data-surulur] .panel { height: 460svh; }
  :root[data-surulur] .panel-poster,
  :root[data-surulur] .panel-video {
    top: 50%; left: 50%; right: auto;
    width: 100%; height: auto; max-width: none;
    transform: translate(-50%, -50%);
  }
  :root[data-surulur] .panel-perde {
    background: linear-gradient(180deg,
      rgb(8 4 0 / 86%) 0, rgb(8 4 0 / 64%) 150px,
      rgb(8 4 0 / 55%) 42%, rgb(8 4 0 / 70%) 100%);
  }
  :root[data-surulur] .panel-metin { padding-block: 84px 2rem; }
  :root[data-surulur] .panel-bant { max-width: none; }
  .panel h1 { max-width: 13ch; }
  .panel h2 { max-width: 12ch; }
  .panel-ozet, .panel-yazi { max-width: none; }
}

/* ---------- Belgelerin PDF hali ---------- */

.belge-pdf { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi); }
.belge-pdf h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.belge-pdf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.belge-pdf a {
  display: grid; gap: 2px; padding: .8rem 0;
  border-bottom: 1px solid var(--cizgi);
  text-decoration: none; color: inherit;
}
.belge-pdf strong { font-size: .97rem; }
.belge-pdf strong::after { content: " PDF"; font-size: .72rem; letter-spacing: .1em;
  color: var(--yesil); vertical-align: 1px; }
.belge-pdf span { font-size: .85rem; color: var(--metin-soluk); }
.belge-pdf a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   EATNAKED KURGUSU (14 Eyl 2026, kullanici: "o sitenin birebir aynisi")
   Referansin olculen tokenlari: zemin #0b0b0b, metin beyaz, tek vurgu
   #f4783e, cam kartlar beyaz %5-11, baslik agirligi 500 / satir 1.
   Bu blok onceki dunyanin ustune yazilir; ic sayfalar da ayni tokenlari
   kullandigi icin tum site ayni kurguya gecer. Yazi tipi Montserrat
   (kullanicinin ayrica verdigi karar).
   ===================================================================== */

:root {
  --zemin: #0b0b0b;
  --zemin-ust: #121212;
  --cam: rgb(255 255 255 / 5%);
  --cam-cizgi: rgb(255 255 255 / 11%);
  --metin: #fff;
  --metin-soluk: #9b9b9b;
  --cizgi: rgb(255 255 255 / 10%);
  --kagit: #efece6;
  --vurgu: #f4783e;
  --vurgu-koyu: #d9612b;
  --yesil: #f4783e;
  --yesil-koyu: #d9612b;
  --yesil-murekkep: #a8461a;
  --yesil-solgun: rgb(244 120 62 / 13%);
  --yesil-zemin: #22140b;
  --gok: #f4783e;
  --gok-buton: #f4783e;
  --gok-koyu: #e0662f;
  --yuvarlak: 22px;
}
body { background: var(--zemin); }
a { color: var(--vurgu); }
a:hover { color: #ffa783; }
::selection { background: var(--vurgu); color: #0b0b0b; }
:focus-visible { outline-color: var(--vurgu); }
h1, h2 { font-weight: 600; }

/* ---------- Hap dugme: turuncu daire + ok ---------- */
.hap {
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: .34rem 1.45rem .34rem .34rem; border-radius: 999px;
  background: linear-gradient(90deg, rgb(244 120 62 / 30%), rgb(255 255 255 / 7%) 58%);
  border: 1px solid rgb(255 255 255 / 8%);
  color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background .25s, border-color .25s;
}
.hap:hover { color: #fff; border-color: rgb(244 120 62 / 45%); }
.hap-ok {
  width: 2.15rem; height: 2.15rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--vurgu); color: #fff;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.hap:hover .hap-ok { transform: translateX(3px); }
.hap .teklif-sayac { top: -5px; right: -5px; background: #fff; color: #0b0b0b; }

.btn-ana { background: var(--vurgu); color: #140a04; box-shadow: none; }
.btn-ana:hover { background: #ff8a55; color: #140a04; box-shadow: none; }
.btn-cizgi:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* ---------- Ust serit ---------- */
.ust {
  position: sticky; top: 0; z-index: 40; border-bottom: 0;
  background: linear-gradient(180deg, rgb(11 11 11 / 96%) 0%, rgb(11 11 11 / 78%) 68%, rgb(11 11 11 / 0) 100%);
  backdrop-filter: none;
}
.ust-ic {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  height: 92px; width: auto; max-width: none; margin: 0;
  padding: 0 clamp(1rem, 2vw, 1.75rem); gap: 0;
}
.logo img { width: 150px; }
.menu-ac {
  display: grid; gap: 6px; place-content: center; width: 48px; height: 44px;
  margin: 0 0 0 1.6rem; padding: 0; background: none; border: 0; cursor: pointer;
}
.menu-ac span { display: block; width: 44px; height: 1.5px; background: #fff; border-radius: 1px; }
.menu-ac span:last-child { width: 30px; justify-self: end; }
.menu {
  justify-self: center; margin: 0; display: flex; align-items: center; gap: 1.9rem;
  position: static; background: none; box-shadow: none; padding: 0; border: 0;
}
.menu a {
  padding: .35rem 0; border-radius: 0; border: 0; background: none;
  color: #fff; font-weight: 500; font-size: 1.02rem;
}
.menu a::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; margin-right: .45rem; vertical-align: .28em;
}
.menu a:hover { background: none; color: var(--vurgu); }
.menu a[aria-current="page"] { color: var(--vurgu); }
.ust-eylem { display: flex; align-items: center; gap: 1.5rem; justify-self: end; }
.ust-numune { color: var(--vurgu); font-weight: 500; font-size: 1.02rem; text-decoration: none; }
.ust-numune:hover { color: #ffa783; }
@media (min-width: 861px) {
  .menu.acik {
    position: fixed; left: 1.25rem; top: 88px; z-index: 50;
    flex-direction: column; align-items: flex-start; gap: .35rem;
    background: #151515; border: 1px solid var(--cam-cizgi); border-radius: 18px;
    padding: 1rem 1.6rem;
  }
}
@media (max-width: 1180px) { .ust-numune { display: none; } .menu { gap: 1.2rem; } }
@media (max-width: 860px) {
  .ust-ic { grid-template-columns: 1fr auto auto; height: 72px; }
  .menu-ac { order: 3; margin: 0 0 0 .9rem; width: 40px; }
  .menu-ac span { width: 34px; }
  .menu-ac span:last-child { width: 22px; }
  .ust-eylem { order: 2; }
  .menu {
    position: fixed; inset: 72px 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #131313; border-bottom: 1px solid var(--cizgi); padding: .6rem 1.25rem 1.25rem;
  }
  .menu.acik { display: flex; }
  .menu a { padding: .9rem .2rem; border-bottom: 1px solid var(--cizgi); font-size: 1.05rem; }
  .ust-eylem .hap { padding-right: 1rem; font-size: .92rem; }
}
/* "Sipariş Ver" iki harf uzun (15 Eyl 2026): 360 px'te logo dugmeye degiyordu,
   390 px'te arada 2 px kaliyordu. */
@media (max-width: 400px) {
  .logo img { width: 124px; }
  .ust-eylem .hap { padding-right: .8rem; font-size: .88rem; }
  .menu-ac { margin-left: .6rem; }
}

/* ---------- Sag ray ---------- */
.ray a { font-size: .74rem; font-weight: 500; letter-spacing: 0; color: rgb(255 255 255 / 45%); }
.ray a::after { background: rgb(255 255 255 / 18%); }
.ray a[aria-current="true"] { color: var(--vurgu); }
.ray a[aria-current="true"]::after { background: var(--vurgu); }

/* ---------- Izgarali zemin: cizgi + kesisim noktalari, kenarlara sonen ---------- */
.izg { position: relative; isolation: isolate; }
.izg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 20%) 1.2px, transparent 1.8px),
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: 130px 130px;
  background-position: -.5px -.5px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 30%, transparent 86%);
          mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 30%, transparent 86%);
}

.sahne {
  position: relative; overflow: hidden;
  min-height: 100svh; padding: clamp(4.5rem, 9vh, 7rem) clamp(1.25rem, 3vw, 2.5rem) 3rem;
}
.dev {
  font-size: clamp(2.3rem, 1rem + 4.2vw, 4.55rem); font-weight: 500;
  line-height: 1.02; letter-spacing: -.02em; text-align: center; margin: 0 auto;
  text-wrap: balance;
}
.dev-buyuk { font-size: clamp(2.8rem, 1rem + 6vw, 6rem); }
.ust-not {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin: 0 0 .7rem; font-weight: 500; font-size: 1.05rem; color: #fff;
}
.ust-not svg { color: #7cbf4a; }
.pill-bas {
  display: inline-block; margin: 0 0 1.4rem; padding: .55rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px;
  font-weight: 500; font-size: .95rem;
}
.cam-kart {
  background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px; padding: 1.4rem 1.5rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@keyframes yuz { 50% { transform: translateY(-10px); } }

/* ---------- 1 Toprak (kahraman) ---------- */
.kahraman {
  position: relative; overflow: hidden; min-height: calc(100svh - 92px);
  text-align: center; padding: 2.2rem clamp(1.25rem, 3vw, 2.5rem) 0;
}
.kahraman h1 {
  font-size: clamp(2.5rem, .8rem + 5.1vw, 5.6rem); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; max-width: 16ch; margin: 0 auto; text-wrap: balance;
}
.kahraman-eylem { margin: 1.6rem 0 0; }
.kahraman-sahne { position: relative; width: min(100%, 720px); aspect-ratio: 16 / 10; margin: 1.2rem auto 0; }
.kahraman-video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 52%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 52%, transparent 80%);
}
.yuzen {
  position: absolute; display: inline-flex; align-items: center; gap: .75rem;
  padding: .35rem 1.2rem .35rem .35rem; border-radius: 14px;
  background: rgb(46 46 46 / 78%); border: 1px solid rgb(255 255 255 / 7%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 500; font-size: 1.02rem; animation: yuz 6s ease-in-out infinite;
}
.yuzen-foto { width: 44px; height: 44px; border-radius: 10px; background: var(--kagit); display: grid; place-items: center; overflow: hidden; }
.yuzen-foto img { width: 86%; mix-blend-mode: multiply; }
.y1 { left: -14%; bottom: 14%; }
.y2 { right: -10%; top: 36%; animation-delay: -2s; }
.y3 { right: 6%; bottom: 2%; animation-delay: -4s; }
.kahraman-alt {
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 2.4rem;
  max-width: 21rem; text-align: left;
}
.hap-cipler { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.hap-cipler li {
  padding: .45rem 1.15rem; border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px; font-weight: 500; font-size: .95rem;
}
.kahraman-alt h2 { font-size: 1.9rem; font-weight: 500; line-height: 1.12; margin: 0 0 .55rem; }
.kahraman-alt p { color: var(--metin-soluk); margin: 0; line-height: 1.45; }
.kose-sekme {
  position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: .55rem;
  padding: 1.15rem 2.3rem; border-top-left-radius: 20px;
  background: linear-gradient(135deg, #b9542a, #e0703e); color: #fff;
  font-size: 1.45rem; font-weight: 500; text-decoration: none;
}
.kose-sekme:hover { color: #fff; background: linear-gradient(135deg, #c85f32, #f07a45); }

/* ---------- 2 Kaynak ---------- */
.teslim { text-align: center; }
.teslim-sahne { width: min(100%, 560px); aspect-ratio: 1; margin: 1.5rem auto 0; }
.teslim-sahne img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
}
.teslim-kart { position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 2.5rem; width: 15.5rem; text-align: left; }
.teslim-kart svg { color: #a3a3a3; margin-bottom: .9rem; display: block; }
.teslim-kart h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.2; margin: 0 0 .6rem; }
.teslim-kart p { color: var(--metin-soluk); font-size: .95rem; line-height: 1.38; margin: 0; }

/* ---------- 3 Ihtiyac ---------- */
.ihtiyac { display: grid; place-items: center; }
.ihtiyac-yigin { width: min(100%, 600px); display: grid; gap: 1.4rem; }
.hedef {
  position: relative; overflow: hidden; border-radius: 32px;
  background: #1c1c1c; border: 1px solid rgb(255 255 255 / 6%);
}
.hedef::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 140% at 44% 50%, rgb(244 120 62 / 40%), transparent 72%);
}
.hedef-bas {
  position: relative; display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: 1.05rem 1rem 1.05rem 1.9rem; background: none; border: 0; cursor: pointer;
  color: #fff; font: inherit; font-weight: 600; font-size: 1.05rem; text-align: left;
}
.hedef-ikon { width: 24px; height: 24px; border-radius: 6px; background: #9b9b9b; color: #1c1c1c; display: grid; place-items: center; flex: none; }
.hedef-cip {
  margin-left: auto; padding: .55rem 1.1rem; border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px; font-weight: 500; font-size: 1rem;
}
.hedef-cip::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-right: .5rem; vertical-align: .28em; }
.hedef-govde { position: relative; display: none; padding: 0 1.9rem 1.9rem; }
.hedef[data-acik] {
  background: linear-gradient(180deg, #7e4426 0%, #3d271b 52%, #26201c 100%);
  border-color: rgb(255 255 255 / 12%);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 4%);
}
.hedef[data-acik]::before { background: radial-gradient(ellipse 50% 60% at 45% 0%, rgb(244 140 90 / 45%), transparent 70%); }
.hedef[data-acik] .hedef-ikon { background: var(--vurgu); color: #fff; }
.hedef[data-acik] .hedef-govde { display: block; }
.hedef-olcu { display: flex; justify-content: space-between; margin: 1.1rem 0 .5rem; }
.hedef-olcu p { margin: 0; }
.hedef-olcu p:last-child { text-align: right; }
.hedef-olcu small { display: block; font-size: .8rem; color: rgb(255 255 255 / 72%); }
.hedef-olcu b { font-size: 2.3rem; font-weight: 600; line-height: 1.05; }
.hedef-alt { display: flex; align-items: center; gap: 1.2rem; }
.hedef-liste { position: relative; flex: 1; list-style: none; margin: 0; padding: .1rem 0 .1rem 1.15rem; display: grid; gap: .5rem; }
.hedef-liste::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--vurgu); }
.hedef-liste li { display: grid; grid-template-columns: 6.6rem 1fr; gap: .6rem; align-items: baseline; font-size: .98rem; }
.hedef-liste small { color: rgb(255 255 255 / 68%); font-size: .8rem; }
.hedef-liste a { color: #fff; text-decoration: none; }
.hedef-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hedef-foto { display: flex; gap: .6rem; }
.hedef-foto span { width: 6rem; height: 6rem; border-radius: 14px; background: var(--kagit); display: grid; place-items: center; overflow: hidden; }
.hedef-foto img { width: 86%; mix-blend-mode: multiply; }
.ihtiyac-yazi { position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 4rem; max-width: 20rem; }
.ihtiyac-yazi h2 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.3rem); font-weight: 500; line-height: 1.02; margin: 0 0 .6rem; }
.ihtiyac-yazi p { color: var(--metin-soluk); margin: 0; }

/* ---------- 4 Guven (Blender sehri) ---------- */
.guven { position: relative; overflow: hidden; min-height: 100svh; }
.guven-harita { position: absolute; inset: 0; background: #0b0b0b center / cover no-repeat; }
.harita-var .guven-harita { background-image: url("/assets/img/sahne/guven-sehir.webp?v=4"); }
.guven-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guven::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 11 11 / 90%) 0%, rgb(11 11 11 / 0) 20%, rgb(11 11 11 / 0) 58%, rgb(11 11 11 / 96%) 100%);
}
.guven-kart {
  position: absolute; z-index: 2; display: grid; gap: .55rem; width: 20rem;
  padding: 1.5rem 1.6rem; border-radius: 22px; color: #fff; text-decoration: none;
  background: rgb(55 55 55 / 42%); border: 1px solid rgb(255 255 255 / 12%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s;
}
.guven-kart:hover { color: #fff; transform: translateY(-4px); border-color: rgb(244 120 62 / 50%); }
.pill-kucuk { justify-self: start; padding: .35rem .85rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; font-size: .82rem; font-weight: 500; }
.guven-kart strong { font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.guven-alt { color: rgb(255 255 255 / 70%); font-size: .95rem; }
.g1 { left: 5%; top: 18%; }
.g2 { right: 5%; top: 18%; }
.g3 { left: 12%; bottom: 20%; }
.g4 { right: 12%; bottom: 20%; }
.guven-bas { position: absolute; z-index: 2; left: 0; right: 0; bottom: 3rem; }

/* ---------- 5 Servis (karusel) ---------- */
.servis { text-align: center; }
.servis-ray { position: relative; height: clamp(320px, 40vw, 520px); margin: 1rem 0 2.5rem; }
.servis-kart {
  position: absolute; top: 50%; left: 50%; width: min(46vw, 690px); aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: 28px; cursor: pointer; opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  filter: blur(7px) brightness(.55);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .7s, opacity .7s;
}
.servis-kart img { width: 100%; height: 100%; object-fit: cover; }
.servis-kart[data-yer="orta"] {
  z-index: 3; opacity: 1; cursor: default; filter: none;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 7%), 0 30px 90px rgb(0 0 0 / 60%);
}
.servis-kart[data-yer="sol"] { z-index: 2; opacity: 1; transform: translate(-122%, -50%) scale(.8); }
.servis-kart[data-yer="sag"] { z-index: 2; opacity: 1; transform: translate(22%, -50%) scale(.8); }
.servis-yazi {
  position: absolute; inset: auto 0 0 0; padding: 2rem 2.3rem; text-align: left;
  background: linear-gradient(0deg, rgb(0 0 0 / 78%) 20%, rgb(0 0 0 / 0));
  opacity: 0; transition: opacity .45s;
}
.servis-kart[data-yer="orta"] .servis-yazi { opacity: 1; }
.servis-yazi h3 { font-size: clamp(1.9rem, 1rem + 1.8vw, 2.8rem); font-weight: 500; line-height: 1.05; margin: 0 0 .3rem; }
.servis-yazi p { color: rgb(255 255 255 / 72%); margin: 0 0 1.1rem; }

/* ---------- 6 Malzeme ---------- */
.malzeme { text-align: center; padding-bottom: 0; }
.malzeme-sahne { position: relative; max-width: 1180px; margin: 0 auto; }
.malzeme-sahne::before {
  content: ""; position: absolute; left: 50%; top: 44%; width: 112%; aspect-ratio: 1;
  transform: translateX(-50%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%;
  pointer-events: none;
}
.malzeme-slayt { display: none; }
.malzeme-slayt[data-acik] { display: block; animation: gel .6s cubic-bezier(.22,.61,.36,1); }
@keyframes gel { from { opacity: 0; transform: translateY(14px); } }
.malzeme h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3.2rem); font-weight: 500; line-height: 1.08; max-width: 16ch; margin: 0 auto; }
.malzeme h2 a { color: #fff; text-decoration: none; }
.malzeme h2 a:hover { color: var(--vurgu); }
.malzeme-tabak {
  position: relative; width: min(92vw, 740px); aspect-ratio: 1; margin: 2.4rem auto -36%;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 46%, #f4f1ea 0%, #ddd6c8 58%, #4a433a 69%, #161616 71%, #202020 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), 0 -30px 120px rgb(0 0 0 / 60%);
}
.malzeme-tabak img { width: 58%; margin-top: -8%; mix-blend-mode: multiply; }
.cips {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .85rem;
  padding: .38rem 1.7rem .38rem .38rem; border-radius: 14px;
  background: #232323; border: 1px solid rgb(255 255 255 / 6%);
  font-weight: 500; font-size: 1.02rem;
}
.cips i { width: 40px; height: 40px; border-radius: 10px; background: #343434; color: #d9d9d9; display: grid; place-items: center; font-style: normal; }
.c1 { left: 14%; top: 36%; } .c2 { left: 9%; top: 50%; } .c3 { left: 4%; top: 64%; }
.c4 { right: 14%; top: 36%; } .c5 { right: 9%; top: 50%; } .c6 { right: 4%; top: 64%; }
.malzeme-ok {
  position: absolute; z-index: 3; top: 82%; width: 64px; height: 64px; border-radius: 50%;
  background: #2b2b2b; border: 6px solid #181818; color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .2s;
}
.malzeme-ok:hover { background: var(--vurgu); }
.malzeme-ok.geri { left: 15%; } .malzeme-ok.ileri { right: 15%; }

/* ---------- Kanit bolumleri koyu dunyada ---------- */
#sizdirmazlik-testi, #sertifikalar { background: var(--zemin); }

/* ---------- 7 Tesis ---------- */
.tesis { text-align: center; isolation: isolate; }
.tesis::before {
  content: ""; position: absolute; inset: -30px; z-index: -1;
  background: url("/assets/img/galeri/tesis-3.webp") center / cover;
  filter: grayscale(1) blur(9px) brightness(.42);
}
.tesis .dev-buyuk { margin-bottom: 2rem; }
.tesis-film { width: min(100%, 780px); margin: 0 auto; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 8px rgb(255 255 255 / 6%), 0 30px 90px rgb(0 0 0 / 70%); }
.tesis-film video { display: block; width: 100%; height: auto; background: #080400; }

/* ---------- 8 Baslayin ---------- */
.baslayin { text-align: center; }
.baslayin .dev { margin: .2rem auto 1rem; }
.baslayin-alt { color: var(--metin-soluk); margin: 0 0 1.6rem; }
.suslu {
  position: absolute; width: 96px; height: 96px; border-radius: 50%; background: var(--kagit);
  display: grid; place-items: center; overflow: hidden; opacity: .55; filter: blur(1.5px);
  animation: yuz 7s ease-in-out infinite;
}
.suslu img { width: 82%; mix-blend-mode: multiply; }
.s1 { left: 13%; top: 16%; } .s2 { right: 12%; top: 12%; animation-delay: -3s; }
.s3 { left: 5%; top: 40%; width: 70px; height: 70px; filter: blur(4px); animation-delay: -1.5s; }
.s4 { right: 7%; top: 38%; width: 64px; height: 64px; filter: blur(4px); animation-delay: -5s; }
.kaydirmalik-sar { position: relative; margin: 3.5rem calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) 0; }
.kaydirmalik {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1rem clamp(1.25rem, 3vw, 2.5rem) 2rem; cursor: grab; scrollbar-width: none;
}
.kaydirmalik::-webkit-scrollbar { display: none; }
.kaydirmalik.surukle { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.yorum-kart {
  position: relative; flex: 0 0 min(86vw, 30rem); scroll-snap-align: start; text-align: left;
  min-height: 15rem; padding: 1.5rem 1.7rem; border-radius: 22px;
  background: #0d0d0d; border: 10px solid #1b1b1b;
}
.yorum-kart::after {
  content: ""; position: absolute; right: -10px; bottom: -10px; width: 45%; height: 45%;
  border-radius: 0 0 22px 0; pointer-events: none;
  background: radial-gradient(ellipse at 100% 100%, rgb(244 120 62 / 55%), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
}
.yorum-kart h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; }
.yorum-alt { color: var(--vurgu); font-size: .85rem; margin: 0 0 1rem; }
.yorum-metin { color: var(--metin-soluk); font-size: .98rem; line-height: 1.5; }
.yorum-metin p { margin: 0; }
.surukle-ipucu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .7rem 1.3rem; border-radius: 999px; pointer-events: none;
  background: rgb(80 80 80 / 55%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight: 500; transition: opacity .3s;
}
.kaydirmalik-sar:has(.surukle) .surukle-ipucu { opacity: 0; }

/* ---------- Footer ---------- */
.alt {
  position: relative; overflow: hidden; margin-top: 0; border-top: 0;
  background: #0b0b0b; color: #fff; font-size: 1rem;
  padding: 6rem clamp(1.25rem, 2vw, 1.75rem) 2rem;
}
.alt::before {
  content: ""; position: absolute; left: 50%; bottom: -35%; width: 55%; height: 70%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(244 120 62 / 34%), transparent 68%);
}
.alt-ic { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; gap: 2rem 5rem; }
.alt-ic ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; }
.alt-ic li { margin: 0; }
.alt-bag a { color: rgb(255 255 255 / 58%); font-size: 1.15rem; font-weight: 500; text-decoration: none; }
.alt-bag li:first-child a, .alt-bag a:hover { color: #fff; text-decoration: none; }
.alt-iletisim { justify-self: end; }
.alt-iletisim a { color: #fff; font-size: 1.15rem; font-weight: 500; text-decoration: none; }
.alt-adres li { font-size: 1rem; line-height: 1.45; margin-bottom: .6rem; }
.alt-adres b { color: var(--vurgu); }
.alt-dev { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 4.5rem; }
.alt-marka { font-size: clamp(4rem, 16.5vw, 18.5rem); font-weight: 500; line-height: .78; letter-spacing: -.045em; color: #fff; }
.alt-yukari {
  flex: none; width: clamp(64px, 8.5vw, 128px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #e0784a; color: #fff;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.alt-yukari:hover { color: #fff; transform: translateY(-6px); }
.alt-son {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 2rem; margin-top: 2.2rem; padding: 0; border: 0; color: #fff; font-size: 1.02rem;
}
.alt-yasal { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; }
.alt-yasal a, .alt .cerez-ayar { color: rgb(255 255 255 / 58%); text-decoration: none; }
.alt-yasal a:hover { color: #fff; }
.alt-muhur-bag { position: static; }
.alt-muhur { height: 44px; }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
  .y1 { left: -4%; } .y2 { right: -2%; }
  .c1, .c4 { top: 30%; } .c2, .c5 { top: 42%; } .c3, .c6 { top: 54%; }
  .servis-kart { width: min(62vw, 690px); }
}
@media (max-width: 860px) {
  .sahne { min-height: 0; padding-top: 4.5rem; padding-bottom: 4rem; }
  .kahraman { min-height: 0; padding-bottom: 0; }
  .kahraman-sahne { aspect-ratio: 1; width: min(100%, 460px); }
  .yuzen { font-size: .88rem; padding: .28rem .9rem .28rem .28rem; }
  .yuzen-foto { width: 34px; height: 34px; }
  .y1 { left: 0; bottom: 8%; } .y2 { right: 0; top: 18%; } .y3 { right: 4%; bottom: -2%; }
  .kahraman-alt { position: static; margin: 2rem 0 0; }
  .kose-sekme { position: static; justify-content: center; margin: 2.4rem calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) 0; border-radius: 0; font-size: 1.2rem; }
  .teslim-kart { position: static; width: auto; margin-top: 1.5rem; }
  .ihtiyac-yazi { position: static; order: -1; margin: 0 0 2rem; text-align: center; max-width: none; }
  .ihtiyac { display: flex; flex-direction: column; }
  .hedef-alt { flex-direction: column; align-items: stretch; }
  .hedef-foto span { width: 50%; height: auto; aspect-ratio: 1; }
  .hedef-olcu b { font-size: 1.9rem; }
  .hedef-cip { display: none; }
  .guven { display: flex; flex-direction: column; gap: 1rem; padding: 55vw 1.25rem 3rem; min-height: 0; }
  .guven-harita { bottom: auto; height: 62vw; }
  .guven::after { background: linear-gradient(180deg, rgb(11 11 11 / 0) 30vw, #0b0b0b 62vw); }
  .guven-kart { position: relative; inset: auto; width: auto; }
  .guven-kart strong { font-size: 1.5rem; }
  .guven-bas { position: relative; bottom: auto; order: -1; margin-bottom: 1rem; }
  .servis-ray { height: 70vw; }
  .servis-kart { width: 84vw; }
  .servis-kart[data-yer="sol"], .servis-kart[data-yer="sag"] { opacity: 0; }
  .servis-yazi { padding: 1.2rem 1.3rem; }
  .malzeme-sahne::before { display: none; }
  .cips { position: static; margin: .35rem; font-size: .9rem; padding-right: 1rem; }
  .cips i { width: 32px; height: 32px; }
  .malzeme-tabak { margin: 1.6rem auto 1rem; width: min(86vw, 420px); }
  .malzeme-ok { position: static; display: inline-grid; margin: 1rem .5rem 0; }
  .suslu { display: none; }
  .alt { padding-top: 4rem; }
  .alt-ic { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .alt-iletisim { justify-self: start; }
  .alt-dev { margin-top: 3rem; }
  .alt-son { flex-direction: column; align-items: flex-start; }
}

/* ---------- Duzeltmeler (ilk tur olcumu) ---------- */
.kahraman, .sahne, .guven, #sizdirmazlik-testi, #sertifikalar { scroll-margin-top: 84px; }
.kahraman h1 { max-width: 25ch; font-size: clamp(2.4rem, .8rem + 4.3vw, 5.2rem); }
.y1 { left: 1%; bottom: 30%; }
.g1 { left: 3%; top: 14%; right: auto; bottom: auto; }
.g2 { right: 8%; top: 12%; left: auto; bottom: auto; }
.g3 { left: 3%; top: 44%; right: auto; bottom: auto; }
.g4 { right: 10%; bottom: 22%; left: auto; top: auto; }
.malzeme-tabak {
  background: radial-gradient(circle closest-side at 50% 50%,
    #ece7dd 0%, #dcd4c6 58%, #7b7163 62%, #1b1b1b 65%, #262626 80%, #121212 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), 0 -40px 140px rgb(0 0 0 / 70%);
}
.malzeme-tabak img { width: 54%; margin-top: 0; }

/* ---------- Acilis: halkalar, dolan amblem, yuzde ---------- */
/* Tamamen CSS: script beklemez, 0.95 sn sayar, sonra kendini soldurur.
   Tiklamayi ya da okumayi engellemez (pointer-events kapali). */
@property --yuzde { syntax: "<integer>"; inherits: false; initial-value: 0; }
.acilis {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #0b0b0b; pointer-events: none;
  animation: acilis-sol .4s ease .95s forwards;
}
.acilis::before, .acilis::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.acilis::before { width: min(70vmin, 620px); aspect-ratio: 1; border: 1px dashed rgb(255 255 255 / 16%); animation: acilis-don 14s linear infinite; }
.acilis::after { width: min(104vmin, 940px); aspect-ratio: 1; border: 1px dashed rgb(255 255 255 / 8%); }
.acilis-ic { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
.acilis-amblem { position: relative; width: 150px; height: 150px; }
.acilis-amblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.acilis-amblem img:first-child { filter: grayscale(1) brightness(.32); }
.acilis-amblem img:last-child { clip-path: inset(100% 0 0 0); animation: acilis-dol .95s cubic-bezier(.6,0,.3,1) forwards; }
.acilis-sayi { --yuzde: 0; counter-reset: y var(--yuzde); font-size: 2.3rem; font-weight: 600; animation: acilis-say .95s cubic-bezier(.6,0,.3,1) forwards; }
.acilis-sayi::after { content: counter(y) "%"; }
@keyframes acilis-dol { to { clip-path: inset(0 0 0 0); } }
@keyframes acilis-say { to { --yuzde: 100; } }
@keyframes acilis-sol { to { opacity: 0; visibility: hidden; } }
@keyframes acilis-don { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media print { .acilis { display: none; } }

/* ---------- Son rotus ---------- */
.alt .alt-yukari, .alt .alt-yukari:hover { color: #fff; }
.ray { transition: opacity .3s; }
.ray.gizle { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .ust { background: #0b0b0b; } }

/* ---------- Performans (14 Eyl, "kasiyor") ----------
   Ayni gorunum, ucuz yontem. Kaydirmada her kare yeniden hesaplanan
   backdrop-filter kalkti (koyu zemin yeterince ayirt ediyor); buyuk
   gorsellerdeki canli blur yerine koyu ortu; video uzerindeki maske
   yerine degrade ortu; tesis zemini onceden bulaniklastirildi. */
.yuzen, .cam-kart, .guven-kart, .surukle-ipucu {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.yuzen { z-index: 2; background: rgb(38 38 38 / 94%); will-change: transform; }
.cam-kart { background: #191919; }
.guven-kart { background: rgb(22 22 22 / 84%); }
.surukle-ipucu { background: rgb(58 58 58 / 92%); }

.kahraman-video { -webkit-mask-image: none; mask-image: none; }
.kahraman-sahne::after {
  content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 62% at 50% 50%, rgb(11 11 11 / 0) 50%, #0b0b0b 80%);
}

.izg::before {
  -webkit-mask-image: none; mask-image: none;
  background-image:
    radial-gradient(ellipse 72% 68% at 50% 46%, rgb(11 11 11 / 0) 30%, #0b0b0b 86%),
    radial-gradient(circle, rgb(255 255 255 / 20%) 1.2px, transparent 1.8px),
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: 100% 100%, 130px 130px, 130px 130px, 130px 130px;
  background-position: 0 0, -.5px -.5px, 0 0, 0 0;
}

.servis-kart {
  filter: none; will-change: transform;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s;
}
.servis-kart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgb(11 11 11 / 64%); transition: opacity .7s;
}
.servis-kart[data-yer="orta"]::after { opacity: 0; }
.servis-yazi { z-index: 2; }

.tesis::before { filter: none; background-image: url("/assets/img/sahne/tesis-bulanik.webp"); }

.malzeme-tabak { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); }

.acilis::before { animation: acilis-don 1.4s linear forwards; }
@keyframes acilis-sol { to { opacity: 0; visibility: hidden; display: none; } }

/* ---------- Kahraman filmi buyudu (kullanici: "biraz daha buyuk olsun, gorunsun") ---------- */
.kahraman-sahne { width: min(100%, 1120px); aspect-ratio: 16 / 9; margin-top: .4rem; }
.kahraman-sahne::after {
  background: radial-gradient(ellipse 58% 64% at 50% 50%, rgb(11 11 11 / 0) 62%, rgb(11 11 11 / 55%) 80%, #0b0b0b 96%);
}
.kahraman-alt { z-index: 3; }
.y1 { left: 8%; bottom: 26%; }
.y2 { right: 7%; top: 30%; }
.y3 { right: 16%; bottom: 8%; }
@media (max-width: 860px) {
  .kahraman-sahne { width: calc(100% + 2 * clamp(1.25rem, 3vw, 2.5rem)); margin-left: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)); aspect-ratio: 1; }
  .y1 { left: 4%; bottom: 14%; } .y2 { right: 4%; top: 14%; } .y3 { right: 8%; bottom: 2%; }
}

/* ---------- Dokunma hedefleri (14 Eyl e2e testi: bazi hedefler 40 px alti) ---------- */
.hap { min-height: 46px; }
@media (max-width: 860px) {
  .alt-yasal a, .alt .cerez-ayar { display: inline-block; padding-block: .6rem; }
  .cerez-bant .btn { min-height: 40px; padding-inline: 1rem; }
  .hedef-liste a { display: inline-block; padding-block: .45rem; }
}

/* ---------- Bilgi katmani geri geldi (15 Eyl, "bilgilendirici havasi gitti") ----------
   Eski ana sayfanin anlatimi yeni dunyanin icinde: kutu yok, kart izgarasi
   yok. Foy ve gruplar koyu zeminde.

   Kaynak sahnesi: baslik ve gorsel ekranda sabit, kaydirma uc adimi sirayla
   acar; gorsel ve kart birlikte degisir. Guvenli varsayilan: JS
   [data-surulen] takmazsa uc adim kartta alt alta okunur. .sahne'nin
   overflow:hidden'i sticky'yi bozar, burada clip. */
.teslim-cerceve { position: relative; }
.teslim-sahne { position: relative; }
.teslim-sahne img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.teslim-sahne img[data-acik] { opacity: 1; }
.teslim-kart { width: 24rem; bottom: 1.5rem; left: 0; }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.adimlar .adim-olcu { margin-top: .8rem; color: var(--yesil); font-weight: 600; font-variant-numeric: tabular-nums; }
.adim-cizgi { display: none; gap: .35rem; margin-bottom: 1.1rem; }
.adim-cizgi span { flex: 1; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 16%); transition: background .4s; }
.adim-cizgi span[data-acik] { background: var(--yesil); }

.teslim[data-surulen] { height: 300svh; min-height: 0; padding: 0; overflow: clip; }
.teslim[data-surulen] .teslim-yapiskan {
  position: sticky; top: 0; height: 100svh; box-sizing: border-box;
  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.25rem, 3vw, 2.5rem) 2rem;
}
.teslim[data-surulen] .teslim-sahne { width: min(100%, 560px, 58svh); }
.teslim[data-surulen] .adim-cizgi { display: flex; }
.teslim[data-surulen] .adimlar { gap: 0; }
.teslim[data-surulen] .adimlar li {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.teslim[data-surulen] .adimlar li[data-acik] { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 860px) {
  .teslim-kart { position: static; width: auto; margin-top: 1rem; }
  .teslim-kart p { font-size: .9rem; }
  .teslim[data-surulen] .teslim-yapiskan { padding: 4.6rem 1.25rem 1rem; }
  .teslim[data-surulen] .dev { font-size: 2rem; }
  .teslim[data-surulen] .teslim-sahne { width: min(100%, 34svh); margin-top: .6rem; }
  .teslim[data-surulen] .teslim-kart { padding: 1rem 1.1rem; }
}

#teknik { background: var(--zemin); scroll-margin-top: 84px; }
/* 360 px'te foy tablosu izgara hucresini 353 px'e itiyordu (alan 320 px). */
.tanitim-ic > * { min-width: 0; }
.foy .ozellik-tablo { width: 100%; overflow-wrap: anywhere; }
.teknik-gruplar { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--cizgi); }
.teknik-gruplar h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
.teknik-gruplar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }

.tesis-filmler { display: grid; gap: 2.5rem; max-width: var(--en); margin: 0 auto; }
@media (min-width: 861px) { .tesis-filmler { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
.tesis-filmler .tesis-film { width: 100%; margin: 0; }
.tesis-film-yazi { text-align: left; margin-top: 1.1rem; }
.tesis-film-yazi h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.tesis-film-yazi p { color: var(--metin-soluk); line-height: 1.55; margin: 0; }

/* Form yedek yolu: e-posta servisi kapaliyken hazir metinli gonderim */
.yedek-yazi { display: block; margin-bottom: .8rem; }
.yedek-sira { display: flex; flex-wrap: wrap; gap: .6rem; }