/* Sayfaya ozgu duzenler. Bilesen kutuphanesi yetmedigi yerde kullanilir.
   Kural: burada da hex renk yok, radius ust siniri 8px, text-transform yok. */

/* ==========================================================================
   Hero (T1 ana sayfa)
   ========================================================================== */
.hero { padding-block: var(--b-16) var(--b-12); }

.hero__izgara {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: var(--b-12);
  align-items: center;
}

.hero__ust {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-3);
}

/* Slider'in dort slaydi da ayni boyda baslik tasir ama sayfada tek <h1>
   olmali (SEO ve ekran okuyucu). Ilk slayt h1, digerleri h2; gorunum
   etiketten degil bu siniftan geliyor. */
.hero__baslik {
  font-size: var(--fs-4xl);
  letter-spacing: -.025em;
  margin-bottom: var(--b-4);
}
@media (max-width: 640px) {
  .hero__baslik { font-size: var(--fs-3xl); }
}

.hero__ozet {
  font-size: var(--fs-lg);
  color: var(--metin-ikincil);
  max-width: 44ch;
  margin-bottom: var(--b-8);
}

.hero__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

@media (max-width: 900px) {
  .hero { padding-block: var(--b-12) var(--b-8); }
  .hero__izgara { grid-template-columns: 1fr; gap: var(--b-8); }
  .hero__ozet { max-width: none; }
}

/* Renk tek basina anlam tasimaz (spec §12): dolu masalar ayrica kalin kenarlikli */

@media (max-width: 560px) {
  .pos { flex-direction: column; min-height: 0; }
}

/* ==========================================================================
   Kanit seridi
   ========================================================================== */
.kanit { background: var(--zemin-alt); border-block: 1px solid var(--kenarlik); }
.kanit .stat + .stat { border-left: 1px solid var(--kenarlik); }

/* Her rakamin onunde ikon (2026-09-22).
   IZGARA kullanildi, sarmalayici <span> EKLENMEDI: ikon iki satiri birden
   kapliyor, sayi ustte, etiket altta. Boylece isaretlemedeki tek degisiklik
   <svg> eklemek oldu - "sadece ikonlar eklenecek" birebir.
   Dolgu, dikey ayrac ve ortalama aynen duruyor; metin hizasi da degismedi
   (sayi ile etiket ayni sutunda, ikisi de ortali). */
.kanit .stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "ikon sayi" "ikon etiket";
  justify-content: center;
  column-gap: var(--b-4);
}
.kanit .stat__ikon {
  grid-area: ikon;
  /* Iki satirin ortasinda dursun; varsayilan "stretch" ikonu gerer. */
  align-self: center;
  width: 32px;
  height: 32px;
  color: var(--vurgu);
}
.kanit .stat__sayi { grid-area: sayi; }
/* Rakam boyutu AYNI kaliyor; yalnizca alt aciklama bir kademe kuculuyor. */
.kanit .stat__etiket { grid-area: etiket; font-size: var(--fs-xs); }

@media (max-width: 720px) {
  .kanit .stat:nth-child(odd) { border-left: 0; }
  .kanit .stat:nth-child(n+3) { border-top: 1px solid var(--kenarlik); }
}
@media (max-width: 480px) {
  .kanit .stat + .stat { border-left: 0; border-top: 1px solid var(--kenarlik); }
}

/* ==========================================================================
   Kapanis CTA
   ========================================================================== */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-8);
}
.cta h2 { max-width: 20ch; }
.cta__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

@media (max-width: 720px) {
  .cta h2 { max-width: none; }
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.slider { position: relative; }   /* dolgu ve overflow tek yerde: "Slayt sahnesi" blogu */
.slider__ray {
  display: flex;
  transition: transform 620ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* padding-block SART: .slider__pencere uzerindeki overflow:hidden slaytin
   en alt ogesini kirpiyor. Butonlar orada oldugu icin alt kenarliklari
   kesiliyordu. 8px bosluk hem kenarligi hem de :focus-visible halkasini
   (2px cizgi + 2px offset) kirpilmaktan kurtarir. */
.slider__slayt { flex: 0 0 100%; min-width: 0; padding-block: var(--b-2); }

/* Gizli slaytlar gorsel olarak gizlenmez - kaydirma animasyonunda gelen slayt
   gorunur olmali. Ekran okuyucu ve sekme sirasi JS tarafinda aria-hidden ve
   tabindex="-1" ile yonetiliyor (slider.js). */

@media (prefers-reduced-motion: reduce) {
  .slider__ray { transition: none; }
}

/* --- Etiketli ilerleme cubuklari ---
   Ileri/geri/durdur butonu yerine her slaytin kendi cubugu var.
   Aktif cubuk SURE boyunca dolar; ayni cubuga tiklamak duraklatir. */
/* Yerlesim ve renkler "Slayt sahnesi" blogunda (mutlak konum, koyu zemin).
   Burada yalnizca izgara yapisi. */
.slider__adimlar {
  display: grid;
  /* 5 slayt (2026-09-26): kimlik slayti basa eklendi */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--b-4);
}

.slider__adim {
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
  padding: 0 0 var(--b-1);
  background: none;
  border: 0;
  /* Etiket cubugu ortalar: cubuk sutunun tamamini kaplarken yazi sola
     yasliydi, ikisi hizasiz duruyordu. */
  text-align: center;
}

.slider__adim-cubuk {
  display: block;
  height: 3px;
  /* Renk "Slayt sahnesi" blogunda (koyu fotograf uzerinde). */
  border-radius: var(--r-xs);
  overflow: hidden;
}
.slider__adim-cubuk i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vurgu);
  border-radius: var(--r-xs);
  /* Tarama isigi icin: isik BU elemanin icinde duruyor ve BU eleman
     kirpiyor. Kirpma cubuga (gri ray) birakilsaydi isik gri bolumun de
     uzerinden gecerdi - istenen, yalnizca kirmiziya donmus alan. */
  position: relative;
  overflow: hidden;
}

.slider__adim-yazi {
  font-size: var(--fs-xs);
  font-weight: 600;
  /* Renk "Slayt sahnesi" blogunda (koyu fotograf uzerinde).
     Baslik senkronu: aktif etiket 2px yukari cikar, beyazlasir, agirligi
     600 -> 700 olur; slayt degisince yumusakca geri doner.
     Sure 350ms: slaydin kendi gecisinden (620ms) kisa, --gecis'ten (160ms)
     uzun - fark ediliyor ama acele etmiyor.
     font-weight gercekten ARA DEGERLERDEN geciyor: Manrope degisken
     eksenli (200-800), sabit kesit degil. */
  transform: translateY(0);
  transition: color .35s ease, transform .35s ease, font-weight .35s ease;
}

.slider__adim--aktif .slider__adim-cubuk i { animation: slider-doldur var(--slider-sure, 7000ms) linear forwards; }

/* Duraklatildiginda dolum yerinde durur - durum gorsel olarak belli olur.
   Tarama isigi da duruyor: duraklatilmis bir cubugun uzerinde donen isik
   "calisiyor" izlenimi verirdi. */
.slider--duruyor .slider__adim--aktif .slider__adim-cubuk i,
.slider--duruyor .slider__adim--aktif .slider__adim-cubuk i::after { animation-play-state: paused; }

@keyframes slider-doldur { from { width: 0; } to { width: 100%; } }

/* Hareket azaltma acikken otomatik gecis yok; aktif cubuk dolu gorunur.
   Tarama isigi tamamen kapatilir. base.css zaten sureyi .01ms'e cekiyor
   ama acik yazmak daha guvenli: orada animasyon BITIS karesinde kalmiyor,
   baslangic bicimine donuyor. */
@media (prefers-reduced-motion: reduce) {
  .slider__adim--aktif .slider__adim-cubuk i { animation: none; width: 100%; }
  .slider__adim--aktif .slider__adim-cubuk i::after { animation: none; opacity: 0; }
}

@media (max-width: 720px) {
  /* 5 cubuk: 3+2. Slaytin alt boslugu cubuklara yer birakir - kimlik metni bir satir uzun,
     cubuklar "Neler var" dugmesinin ustune biniyordu (olculdu). */
  .slider__adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-3); }
  .slider .slider__slayt { padding-bottom: calc(var(--b-24) + var(--b-16)); }
}

/* Secili oge renk disinda kenarlikla da isaretlenir (spec §12) */

@media (max-width: 1024px) {
  .qr { display: none; }
}

/* ==========================================================================
   Sektor seridi - slider'in alt kenarina binen kart satiri
   Saha ekibinin istedigi duzen: hero bitmeden kartlar basliyor, sayfa
   "devam ediyor" hissi veriyor. Basligi kartlarin altinda, tek satir.
   ========================================================================== */
.sektor-serit {
  position: relative;
  z-index: 1;
  /* Slider'in alt boslugunun uzerine otur. Deger slider'in alt dolgusundan
     kucuk: kartlarin ust kenari fotografin icinde kalsin, tamamen degil. */
  margin-top: calc(-1 * var(--b-16));
  padding-top: 0;
}

/* Serit kabin disina tasar: 9 kart 1200px'te 120px'e dusuyor, baslik ucuncu
   satira kiriliyordu. 1360px'te kart ~140px, iki satirlik baslik siger. */
.sektor-serit .kap { max-width: 85rem; }

/* 8 kart (2026-09-23): Donanim karti icerik gelene kadar gizli (karar K8).
   Geri gelirse 9'a ve 1200px altinda 5'e donun. */
.sektor-serit__izgara {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--b-2);
}

/* Serit kartlari normal kartlardan daha kompakt: hero'nun altinda dar bir
   bant olusturuyorlar, ic bosluk buyuk olursa bant sayfayi asagi itiyor. */
.sektor-serit .kart {
  padding: var(--b-4) var(--b-2);
  text-align: center;
  /* Dinlenmede neredeyse duz duruyor; golgeyi hover'da KAZANIYOR. */
  box-shadow: var(--sh-sm);
  transition: border-color var(--gecis), box-shadow var(--gecis),
              transform var(--gecis);
}

/* Hover: kart 4px yukselir ve hafif bir golge alir.
   Ozgulluk uyarisi: UC sinif sart. Iki sinifla yazilsaydi ".sektor-serit
   .kart" ile ayni ozgullukte olurdu ve ondan ONCE geldigi icin golge hic
   degismezdi - sessizce olu kural. */
.sektor-serit .kart--tiklanir:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

/* "Tumu" karti digerlerinden ayrilsin - referanstaki "All Our Services"in
   karsiligi. Kirmizi yalnizca aksan oldugu icin dolu degil, cerceveli. */
.sektor-serit__tumu { border-color: var(--red-200); background: var(--zemin-vurgu); }

.sektor-serit .kart__ikon {
  /* 44px dairesel yuzey, icinde 28px ikon (44 - 2x8 dolgu; border-box).
     Yuzey acik kirmizi (red-50), ikon RestoPOS kirmizisi (red-600).
     Tek renk dili: urune gore renk degismiyor, kirmizi yine yalnizca
     aksan (karar 2). Daire icin 50% yaricap karar 3'te acikca serbest. */
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--b-2);
  padding: var(--b-2);
  color: var(--vurgu);
  background: var(--zemin-vurgu);
  border-radius: 50%;
  transition: background var(--gecis), color var(--gecis),
              transform var(--gecis);
}

/* "Tumu" kartinin ZEMINI zaten acik kirmizi; ikon yuzeyi ayni renkte kalsa
   kaybolurdu, beyaza cevriliyor. Bu kural temel ikon kuralindan SONRA
   gelmek zorunda: ikisi de iki sinif ozgullugunde, sonraki kazanir.
   Eski dizilimde ONCE geliyordu, yani hic uygulanmiyordu. */
.sektor-serit__tumu .kart__ikon { background: var(--zemin); }

/* Hover: yuzey kirmiziya, ikon beyaza doner; ikon kartin kendi 4px'ine ek
   olarak 2px daha yukari kayar - kucuk bir "one cikma" jesti. */
.sektor-serit .kart--tiklanir:hover .kart__ikon {
  background: var(--vurgu);
  color: var(--metin-ters);
  transform: translateY(-2px);
}
.sektor-serit .kart__baslik { font-size: var(--fs-sm); margin-bottom: var(--b-1); }
.sektor-serit .kart__metin { font-size: var(--fs-xs); line-height: 1.4; }

/* 9 kart dar ekranda tek satira sigmaz; kademeli olarak azaliyor. */
@media (max-width: 1200px) { .sektor-serit__izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .sektor-serit__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .sektor-serit__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sektor-serit__alt {
  margin: var(--b-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  text-align: center;
}
.sektor-serit__alt strong { color: var(--metin); font-weight: 700; }
.sektor-serit__alt a {
  color: var(--vurgu-koyu);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sektor-serit__alt a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  /* Dar ekranda binme yok: kartlar iki sutuna dusuyor, serit yukseliyor ve
     hero metninin uzerine cikiyordu. Binme olmayinca cubuklar da eski
     yerine, fotografin alt kenarina yakin donebilir.
     NOT: .slider__adimlar'in konumu "Slayt sahnesi" blogunda tanimli; bu
     medya sorgusu ondan ONCE geldigi icin burada ezilirdi - o yuzden
     cubuk ayari oraya, blogun icine yazildi. */
  .sektor-serit { margin-top: 0; padding-top: var(--b-8); }
}

/* ==========================================================================
   "Neden RestoPOS" - fotograf kolaji + kanit listesi
   Duzen restopos.com'daki WHY CHOOSE US bolumunden alindi; renk, kose
   yaricapi ve yazi sekli BIZIM sistemimiz (kararlar 1-4).
   ========================================================================== */
.neden {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--b-16);
  align-items: center;
  margin-bottom: var(--b-16);
}

/* --- Gorsel ---
   Uc fotografli kolaj kaldirildi. Tek gorsel, kirpilmadan ve tam genislikte.

   Cerceve, golge, yaricap YOK: gorselin kendi zemini beyaz ve bolum zemini
   de beyaz, yani gorsel sayfanin icine akiyor. Kolajdaki cerceve/golge
   fotograflari birbirinden ayirmak icindi; tek gorselde ayiracak sey yok.

   Kirpilmama garantisi olculerden geliyor: genislik %100, yukseklik auto -
   gorsel dogal 3/2 oranini koruyor, hicbir kutuya zorlanmiyor. */
.neden__gorsel {
  margin: 0;
  position: relative;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.neden__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  /* Beyaz gorseli sayfadan koparmadan hafif derinlik.
     NOT: gorselin alfa kanali yok (opak RGB), bu yuzden drop-shadow
     cihazlarin siluetini degil DIKDORTGEN kenari takip ediyor. Silueti
     sarmasi isteniyorsa kaynak gorselin zemini saydam olmali. */
  filter: drop-shadow(var(--sh-gorsel));
  animation: neden-gorsel-giris .7s ease-out both;
}
.neden__gorsel:hover { transform: translateY(-3px) scale(1.005); }

/* Giris animasyonu KAYDIRINCA oynasin.
   Sebep olculdu: bu bolumun ustu sayfada ~790-950px asagida. Zaman tabanli
   animasyon sayfa acilirken basliyor ve 0.7 saniyede bitiyor; kullanici
   oraya kaydirdiginda coktan bitmis oluyor, yani kimse gormuyor.

   @supports SART: destegi olmayan tarayici bu blogu komple atlar ve
   yukaridaki zaman tabanli animasyon aynen calisir. Yani en kotu ihtimalde
   davranis, sahanin verdigi CSS'in davranisi olur - gorselin kaybolmasi
   gibi bir risk yok. */
@supports (animation-timeline: view()) {
  .neden__gorsel img {
    animation-timeline: view();
    animation-range: entry 15% entry 70%;
  }
}

@keyframes neden-gorsel-giris {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .neden__gorsel,
  .neden__gorsel img { animation: none; transition: none; }
}

/* --- Metin --- */
.neden__metin .bolum__ozet { margin-bottom: var(--b-5); }
.neden__metin h2 { max-width: 18ch; }
.neden__metin h2 .vurgu { color: var(--vurgu); }

.neden__guven {
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-5);
}

.neden__liste { list-style: none; margin: 0 0 var(--b-8); padding: 0; display: grid; gap: var(--b-3); }
.neden__liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--b-3);
  align-items: start;
  line-height: var(--lh-genis);
}
/* Tik isareti satir ici SVG: veri URI'siyle yazilsaydi renk hex olarak
   gomulu kalirdi (karar 1: renkler yalnizca degiskenlerden). Kod tabaninda
   ayni yontem .ozellik__im'de de kullaniliyor. */
.neden__tik {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .2em;
  padding: .2rem;
  flex: none;
  fill: none;
  stroke: var(--vurgu-koyu);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--zemin-vurgu);
  border-radius: 50%;
}

.neden__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

@media (max-width: 960px) {
  .neden { grid-template-columns: 1fr; gap: var(--b-10); }
  .neden__metin h2 { max-width: none; }
}


/* ==========================================================================
   RestoOne - mobil yonetim vitrini
   Eski "Konusalim" bolumunun yerine gecti (2026-09-22). O bolumun tum
   .konus* kurallari silindi; baska yerde kullanilmiyordu (denetlendi).

   Bolumun isi urunu KANITLAMAK: uygulama ekranlarinin kendisi kanit, o
   yuzden ne gorselin arkasinda kart var ne de dikkat cekmeye calisan
   hareket. Tek seferlik, kisa bir giris disinda animasyon yok.
   ========================================================================== */
.restoone {
  display: grid;
  /* Saha: "%48-50 gorsel / %50-52 icerik". 1168px govde, 48px ara ->
     sol 549px, sag 571px. */
  grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
  gap: var(--b-12);
  align-items: center;
}

/* Gorselin KENDI pembe atmosferi ve beyaz kosesi var; arkasina kart,
   cerceve, gradient ya da golge KONULMUYOR. Kirpilma da yok: genislik
   %100, yukseklik auto, dogal oran (1.199:1) korunuyor. */
.restoone__gorsel { margin: 0; }
.restoone__gorsel img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

.restoone__etiket {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-3);
}
.restoone__rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--zemin-vurgu);
  border-radius: 50%;
}
.restoone__rozet svg { width: 16px; height: 16px; color: var(--vurgu); }

.restoone__metin h2 .vurgu { color: var(--vurgu); }
.restoone__metin .bolum__ozet { margin-bottom: var(--b-8); }

/* 2x2. Kartlar sade: ana urun gorselinden baskin olmamali, bu yuzden
   golge yok ve dolgu olculu. */
.restoone__izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-3);
  margin-bottom: var(--b-8);
}
.restoone-kart {
  padding: var(--b-5);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.restoone-kart__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--b-3);
  background: var(--zemin-vurgu);
  border-radius: 50%;
}
.restoone-kart__ikon svg { width: 18px; height: 18px; color: var(--vurgu); }
.restoone-kart b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  margin-bottom: var(--b-2);
}
.restoone-kart span:not(.restoone-kart__ikon) {
  display: block;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}

.restoone__eylem { margin: 0; }

/* --- Tek seferlik giris ---
   Sinifi gorunum.js ekliyor. Gorsel once, sagdaki icerik 100ms sonra.
   "backwards" dolgu: bitis karesi kalici kalmasin. */
.restoone--gorunur .restoone__gorsel,
.restoone--gorunur .restoone__metin {
  animation: restoone-giris 550ms ease-out backwards;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes restoone-giris {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .restoone--gorunur .restoone__gorsel,
  .restoone--gorunur .restoone__metin { animation: none; }
}

@media (max-width: 1024px) {
  .restoone { gap: var(--b-8); }
  .restoone-kart { padding: var(--b-4); }
}
@media (max-width: 900px) {
  /* Iki kolon zorlanmiyor. Sira: etiket - baslik - ozet - GORSEL -
     ozellikler - CTA. Gorsel kucululur ama kirpilmaz. */
  .restoone { grid-template-columns: 1fr; }
  .restoone__gorsel { order: 2; }
  .restoone__metin { display: contents; }
  .restoone__etiket { order: 0; }
  .restoone__metin h2 { order: 0; }
  .restoone__metin .bolum__ozet { order: 1; margin-bottom: 0; }
  .restoone__izgara { order: 3; margin-bottom: 0; }
  .restoone__eylem { order: 4; }
  .restoone__gorsel img { max-width: 28rem; }
}
@media (max-width: 520px) {
  .restoone__izgara { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Vitrin - urun tanitim bolumu: gorsel + metin + 2x2 kart
   RSManager ve RSManager QR Menu icin (2026-09-23). Ana sayfada RestoOne'in
   hemen ardindan geliyorlar; uc bolum bir aile gibi okunsun diye olculer
   .restoone ile BIREBIR ayni: 49/51 izgara, 48px ara, 34rem gorsel tavani,
   2x2 kart, ayni kart dolgusu ve ikon yuzeyi.

   Neden .restoone'dan turetilmedi: RestoOne bolumu onayli (devir §6);
   onu genellestirmek onayli bolumun kurallarina dokunmak demekti. Bedeli
   ~70 satir tekrar. Olculerden biri degisirse IKISI BIRLIKTE degismeli.

   Detay sayfalarinda ayni bilesen "yetenek" bolumlerini tasir: etiket
   yerine .bolum__ust, 2x2 ikonlu kart yerine tikli .ozellik-izgara, CTA yok.
   ========================================================================== */
.vitrin {
  display: grid;
  grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
  gap: var(--b-12);
  align-items: center;
}
/* Ters: metin solda, gorsel sagda. Isaretlemede de METIN ONCE yazilir;
   okuma ve sekme sirasi ekrandaki sirayla ayni kalsin diye "order" ile
   yer degistirilmiyor. Bu yuzden burada yalnizca sutun oranlari doner. */
.vitrin--ters { grid-template-columns: minmax(0, 51fr) minmax(0, 49fr); }

/* Gorselin arkasina kart, cerceve, gradient ya da golge KONULMUYOR (RestoOne
   ile ayni karar). Kirpilma yok.
   Kose 8px (2026-09-23): gelen gorsellerin bir kismi fotograf zeminli
   (G3-G5, 16:9) ve dikdortgen panel olarak okunuyor; yanindaki 8px'lik
   kartlarin yaninda keskin kose sirittiyordu. Spec §4.3: --r-lg "kart,
   panel, gorsel". Saydam gorsellerde (G2) kose bos, etkisi yok. */
.vitrin__gorsel { margin: 0; }
.vitrin__gorsel img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--r-lg);
}

.vitrin__etiket {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-3);
}
.vitrin__rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--zemin-vurgu);
  border-radius: 50%;
}
.vitrin__rozet svg { width: 16px; height: 16px; color: var(--vurgu); }

.vitrin__metin .bolum__ozet { margin-bottom: var(--b-8); }
/* Detay sayfasinda metin sutununun sonu tikli kartlar; kendi dis boslugu
   bolum dolgusuna eklenip altta fazladan 32px birakiyordu. */
.vitrin__metin .ozellik-izgara { margin: 0; }
/* Dil etiketleri (QR Menu, "cok dil" bolumu): kartlarin ustunde, sikisik. */
.vitrin__metin .rozet-serit { margin: 0 0 var(--b-6); }

.vitrin__izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-3);
  margin-bottom: var(--b-8);
}
.vitrin-kart {
  padding: var(--b-5);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.vitrin-kart__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--b-3);
  background: var(--zemin-vurgu);
  border-radius: 50%;
}
.vitrin-kart__ikon svg { width: 18px; height: 18px; color: var(--vurgu); }
.vitrin-kart b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  margin-bottom: var(--b-2);
}
.vitrin-kart span:not(.vitrin-kart__ikon) {
  display: block;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}

.vitrin__eylem { margin: 0; }

/* --- Tek seferlik giris ---
   Sinifi gorunum.js ekliyor (RestoOne ile ayni esik ve sure). Once kaynak
   sirasindaki ilk sutun, 100ms sonra ikincisi. "backwards": bitis karesi
   kalici kalmasin. */
.vitrin--gorunur .vitrin__gorsel,
.vitrin--gorunur .vitrin__metin {
  animation: vitrin-giris 550ms ease-out backwards;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes vitrin-giris {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vitrin--gorunur .vitrin__gorsel,
  .vitrin--gorunur .vitrin__metin { animation: none; }
}

@media (max-width: 1024px) {
  .vitrin { gap: var(--b-8); }
  .vitrin-kart { padding: var(--b-4); }
}
@media (max-width: 900px) {
  /* RestoOne ile ayni sira: etiket - baslik - ozet - GORSEL - kartlar - CTA.
     Ters bolumde de ayni; gorsel her zaman ozetin ardindan gelir. */
  .vitrin,
  .vitrin--ters { grid-template-columns: 1fr; }
  .vitrin__gorsel { order: 2; }
  .vitrin__metin { display: contents; }
  .vitrin__metin .bolum__ozet { order: 1; margin-bottom: 0; }
  .vitrin__izgara,
  .vitrin__metin .rozet-serit,
  .vitrin__metin .ozellik-izgara { order: 3; margin-bottom: 0; }
  .vitrin__eylem { order: 4; }
  .vitrin__gorsel img,
  .vitrin__gorsel .yuva { max-width: 28rem; }
}
@media (max-width: 520px) {
  .vitrin__izgara { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gorsel yuvasi - teslim edilmemis gorselin YERI (2026-09-23)
   Gorseller kullanicidan gelecek. Yuva, gorselin kaplayacagi alani BIREBIR
   ayirir: ayni genislik tavani, ayni oran (4:3 = 1600x1200 istendi). Gorsel
   gelince <div class="yuva"> yerine <img> konur; cevresindeki duzen
   hic kipirdamaz.

   Sahte icerik TASIMAZ - ornek ekran, uydurma rakam yok (devir 8.1t).
   Uzerinde yalnizca kodu (G1...), ne beklendigi ve olcusu yazar; kod,
   teslim raporundaki ve devir dosyasindaki satirla eslesir.

   Neden bos yuva da "yer tutucu dosya" degil: web.config gorselleri 365 gun
   onbellege aliyor ve dosya adlarinda surum yok. Ayni ada sonradan gercek
   gorsel yazilsa ziyaretci bir yil boyunca yer tutucuyu gorurdu.

   YAYINA CIKMAMALI: sayfada yuva kaldikca yayin-denetle.py ve
   yayin-paketle.py sorun bildirir.
   ========================================================================== */
.yuva {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  padding: var(--b-6);
  background: color-mix(in srgb, var(--metin) 3%, transparent);
  border: 1px dashed var(--kenarlik-koyu);
  border-radius: var(--r-lg);
  text-align: center;
}
.yuva__kod {
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--vurgu-koyu);
}
.yuva__ad {
  max-width: 28ch;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-normal);
  color: var(--metin);
}
.yuva__olcu {
  font-size: var(--fs-xs);
  color: var(--metin-ikincil);
}

/* ==========================================================================
   Cozum ortaklari
   ========================================================================== */
.ortak {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--b-12);
  align-items: center;
}
.ortak__eylem { margin-top: var(--b-6); }
.ortak__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-4); }
.ortak__liste li {
  background: var(--zemin);
  border: 1px solid var(--red-100);
  border-radius: var(--r-lg);
  padding: var(--b-4) var(--b-6);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}
.ortak__liste strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  color: var(--metin);
  margin-bottom: var(--b-1);
}

@media (max-width: 860px) {
  .ortak { grid-template-columns: 1fr; gap: var(--b-8); }
}

/* ==========================================================================
   Sizi arayalim
   ========================================================================== */
.arayalim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b-12);
  align-items: start;
}
.arayalim__ozet {
  font-size: var(--fs-lg);
  line-height: var(--lh-genis);
  color: color-mix(in srgb, var(--metin-ters) 72%, transparent);
  margin-top: var(--b-4);
}
.arayalim__ozet strong { color: var(--metin-ters); }

.arayalim__iletisim { list-style: none; margin: var(--b-8) 0 0; padding: 0; display: grid; gap: var(--b-4); }
.arayalim__iletisim li { display: flex; align-items: center; gap: var(--b-3); font-size: var(--fs-base); }
.arayalim__iletisim .ikon { color: var(--red-400); }
.arayalim__iletisim a { color: var(--metin-ters); text-decoration: none; font-weight: 600; }
.arayalim__iletisim a:hover { color: var(--red-300); text-decoration: underline; }

/* --- Koyu zemin uzerinde form --- */
.form--koyu { max-width: none; }
.form--koyu label { color: var(--metin-ters); }
.form--koyu input,
.form--koyu select,
.form--koyu textarea {
  background: color-mix(in srgb, var(--metin-ters) 8%, transparent);
  border-color: color-mix(in srgb, var(--metin-ters) 22%, transparent);
  color: var(--metin-ters);
}
.form--koyu input::placeholder { color: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
.form--koyu input:hover,
.form--koyu select:hover,
.form--koyu textarea:hover { border-color: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
.form--koyu input:focus-visible,
.form--koyu select:focus-visible,
.form--koyu textarea:focus-visible { border-color: var(--red-400); }
.form--koyu input:user-invalid,
.form--koyu select:user-invalid { border-color: var(--red-400); }
.form--koyu option { background: var(--n-800); color: var(--metin-ters); }

.form--koyu .alan--onay label { color: color-mix(in srgb, var(--metin-ters) 72%, transparent); }
.form--koyu .alan--onay a { color: var(--red-300); }
.form--koyu .alan__hata { color: var(--red-300); }

.form--koyu .form__not {
  background: color-mix(in srgb, var(--metin-ters) 7%, transparent);
  border-left-color: var(--red-400);
  color: color-mix(in srgb, var(--metin-ters) 68%, transparent);
}
.form--koyu .form__not a { color: var(--metin-ters); }

@media (max-width: 860px) {
  .arayalim { grid-template-columns: 1fr; gap: var(--b-8); }
}

/* Hero butonlari: dar alanda ezilmesin, metin buton icinde bolunmesin.
   Flex ogesi varsayilan olarak kucululebilir; bu iki kural onu engeller. */
.hero__eylem .btn { flex: 0 0 auto; white-space: nowrap; }

/* Cok dar ekranda butonlar alt alta ve tam genislikte */
@media (max-width: 420px) {
  .hero__eylem { flex-direction: column; align-items: stretch; }
  .hero__eylem .btn { width: 100%; }
}

/* ==========================================================================
   Sayfa basligi (T2/T3/T4 sablonlari)
   ========================================================================== */
.sayfa-bas { padding-block: var(--b-6) var(--b-12); border-bottom: 1px solid var(--kenarlik); }

/* Gorseli olan sayfalarda iki sutun: solda metin, sagda gorsel.
   Gorsel yoksa izgara tek sutuna duser, metin tam genislige yayilmaz -
   okuma genisligi korunur. */
.sayfa-bas__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-12);
  align-items: center;
}
.sayfa-bas__izgara:has(.sayfa-bas__gorsel) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.sayfa-bas__metin { min-width: 0; }

.sayfa-bas__gorsel {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--b-6);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
/* Kendi zemini/atmosferi olan gorseller icin cerceveiz yuva: gri kutu ve
   kenarlik, beyaz zeminli bir cizimin etrafinda gereksiz bir kart yaratiyor. */
.sayfa-bas__gorsel--cercevesiz {
  padding: 0;
  background: none;
  border: 0;
}
.sayfa-bas__gorsel img {
  /* Kaynak gorsellerin bir kismi kucuk (300px). Buyutmek bulanik gosterir;
     kendi olcusunde birakilip cercevede ortalanir. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.sayfa-bas h1 { max-width: 22ch; margin-top: var(--b-2); }
.sayfa-bas__ozet {
  font-size: var(--fs-lg);
  color: var(--metin-ikincil);
  max-width: 58ch;
  margin-top: var(--b-4);
}
.sayfa-bas__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); margin-top: var(--b-8); }

@media (max-width: 900px) {
  .sayfa-bas__izgara:has(.sayfa-bas__gorsel) { grid-template-columns: minmax(0, 1fr); }
  .sayfa-bas__gorsel { padding: var(--b-4); }
}
@media (max-width: 640px) {
  .sayfa-bas { padding-block: var(--b-4) var(--b-8); }
  .sayfa-bas h1 { max-width: none; }
}

/* ==========================================================================
   Duz metin akisi (cikarilan icerik)

   Metin kabin tamamini kullanir; okuma olcusu YALNIZCA .metin--olcu ile
   isaretlenen hukuki sayfalara uygulanir.

   Neden ayrim: olculdu - 600 karakterden uzun paragrafi olan yalnizca 3 sayfa
   var, ucu de hukuki (kvkk-aydinlatma'da 1915 karakterlik tek paragraf, tam
   genislikte 14 satirlik kesintisiz blok olurdu). Kalan 48 sayfada en uzun
   paragraf 562 karakter = tam genislikte 4 satir. Hepsini 68ch'e kismak
   ekranin sag yarisini bos birakiyordu, kazanci da yoktu.
   ========================================================================== */
.metin--olcu > p,
.metin--olcu > ul,
.metin--olcu > ol,
.metin--olcu > h2,
.metin--olcu > h3,
.metin--olcu > h4,
.metin--olcu > dl,
.metin--olcu > blockquote,
.metin--olcu > .uyari { max-width: var(--genislik-metin); }

.metin h2 { font-size: var(--fs-2xl); margin-top: var(--b-12); margin-bottom: var(--b-4); }
.metin h3 { font-size: var(--fs-xl); margin-top: var(--b-8); margin-bottom: var(--b-3); }
.metin h4 { font-size: var(--fs-lg); margin-top: var(--b-6); margin-bottom: var(--b-2); }
.metin h2:first-child, .metin h3:first-child, .metin h4:first-child { margin-top: 0; }
.metin p { margin-bottom: var(--b-4); }
.metin ul { margin-bottom: var(--b-4); padding-left: var(--b-6); }
.metin li { margin-bottom: var(--b-2); }
.metin > .uyari { margin-bottom: var(--b-4); }

/* ==========================================================================
   Slayt sahnesi - tam zemin fotograf + koyu perde + yuzen urun karti

   Tasarim karari: fotograf slaytin TAMAMINI kaplar, uzerine CSS ile koyu
   degrade cizilir (fotografa basilmaz, degistirilebilir kalir). Metin bu
   koyu alanin uzerinde durur, urun karti sagda fotografin uzerine biner.

   Yukseklik viewport genisligine DEGIL sabit bir araliga baglidir. Onceki
   denemede fotografin genisligi ekran genisligine baglanmisti; genis
   ekranda buyuyup duzeni ezdi. Bu surumde o bagimlilik yok.
   ========================================================================== */

/* .slider'in dolgusu YALNIZCA burada tanimlanir (onceden uc ayri yerdeydi,
   en sondaki digerlerini sessizce eziyordu).

   DOLGU YOK - ve bilerek: adim cubuklari mutlak konumlu, slider'in alt
   kenarina yapisik ve ACIK renkli (koyu fotografin uzerinde duruyorlar).
   Alt dolgu eklemek onlari fotografin disina, beyaz alana itiyor; beyaz
   uzerine beyaz yaziya donuyorlar ve "kayboluyorlar" (saha bildirdi).
   Sektor seridine yer acmak icin dolgu degil, cubuklarin bottom degeri
   yukseltilir - bkz. .slider__adimlar. */
.slider { padding-block: 0; }
.slider__pencere { overflow: hidden; }

.slider__slayt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 58vh, 40rem);
  padding-block: var(--b-8) calc(var(--b-24) + var(--b-8));
  background: var(--zemin-koyu);
}

/* --- Zemin fotografi --- */
.slayt-zemin { position: absolute; inset: 0; margin: 0; z-index: -2; }
.slayt-zemin img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

/* --- Koyu perde: metnin okunmasini garantiler --- */
.slayt-perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--perde-guclu);
}
.slayt-perde::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, color-mix(in srgb, var(--zemin-koyu) 55%, transparent), transparent);
}

/* --- Icerik --- */
.slider .hero__metin { max-width: 34rem; }
.slider .hero__baslik { color: var(--metin-ters); }
.slider .hero__baslik .vurgu { color: var(--red-400); }
.slider .hero__ozet { color: color-mix(in srgb, var(--metin-ters) 78%, transparent); }
.slider .btn--ikincil {
  color: var(--metin-ters);
  border-color: color-mix(in srgb, var(--metin-ters) 36%, transparent);
}
.slider .btn--ikincil:hover {
  border-color: var(--metin-ters);
  background: color-mix(in srgb, var(--metin-ters) 10%, transparent);
}

/* --- Yuzen urun arayuzu karti --- */

/* --- Ilerleme cubuklari koyu zemin uzerinde --- */
.slider__adimlar {
  position: absolute;
  left: 50%;
  /* Sektor seridi slider'in alt 64px'ine biniyor; cubuklar onun USTUNDE
     kalmali, yoksa kartlarin altinda gorunmez oluyorlar. 64 + 24 nefes. */
  bottom: calc(var(--b-16) + var(--b-6));
  transform: translateX(-50%);
  width: min(100% - var(--b-8), var(--genislik-icerik));
  max-width: 44rem;
  margin: 0;
  z-index: 2;
}
/* 900px altinda serit binmiyor; cubuklar fotografin alt kenarina yaklasabilir */
@media (max-width: 900px) {
  .slider__adimlar { bottom: var(--b-8); }
}

.slider__adim-cubuk { background: color-mix(in srgb, var(--metin-ters) 25%, transparent); }
.slider__adim-yazi { color: color-mix(in srgb, var(--metin-ters) 62%, transparent); }
.slider__adim:hover .slider__adim-yazi { color: var(--metin-ters); }
.slider__adim:hover .slider__adim-cubuk { background: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
/* Baslik senkronu: aktif etiket beyaza doner, 2px yukari cikar, agirligi
   600 -> 700'e gecer. Gecis tanimi temel blokta (.slider__adim-yazi). */
.slider__adim--aktif .slider__adim-yazi {
  color: var(--metin-ters);
  transform: translateY(-2px);
  font-weight: 700;
}

/* --- Tarama isigi ---
   Isik GRI rayin degil, YALNIZCA kirmiziya donmus bolumun uzerinden geciyor:
   ::after kirmizi dolgunun (i) kendisine bagli ve o eleman overflow:hidden.
   Dolgu %0 iken isik tamamen kirpilir, dolgu buyudukce ortaya cikar.

   Neon yok: golge, filtre, parlama kullanilmiyor - yalnizca bir degrade ve
   en fazla .65 opaklik.

   NOT (sahaya verilen taslaktan sapma): taslak "transform: translateX(-40px
   -> 180px)" diyordu. Bizde cubuk genisligi sabit degil - 4 sutunda 164px,
   720px kirilmasinda 2 sutuna dusunce 338px'e cikiyor. Sabit 180px orada
   isigi cubugun ORTASINDA sondururdu. Bu yuzden "left" animasyonu
   kullaniliyor: -40px'ten %100'e gidiyor, yani her genislikte cubugu
   bastan sona tariyor. Maliyeti onemsiz - 3px yuksekliginde tek eleman. */
.slider__adim--aktif .slider__adim-cubuk i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Animasyon disindaki baslangic degeri: solda, kirpma alaninin disinda.
     Yazilmazsa "left: auto" kalir ve animasyon calismadigi durumda
     (ornegin hareket azaltma) isik statik olarak gorunur olabilir. */
  left: -40px;
  width: 28px;
  background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--metin-ters) 55%, transparent),
      transparent);
  animation: slider-tarama 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes slider-tarama {
  0%, 45% { left: -40px;  opacity: 0; }
  55%     {               opacity: .65; }
  85%     {               opacity: .65; }
  100%    { left: 100%;   opacity: 0; }
}

/* --- Giris hareketi ---
   Aktif slaydin basligi, ozeti ve butonlari sirayla belirir.

   BOZUKTU: onceki surumde yalnizca animation-delay yaziliydi, animation-name
   hic verilmemisti - yani animasyon hic calismiyordu. Alttaki reduced-motion
   blogu da yarim kalmisti (secici var, bildirim yok).

   Baslik ayrica kelime kelime belirir: .vurgu (kirmizi bolum) biraz gecikmeli
   gelince cumle once kurulur, vurgu sonra oturur. */
.slider__slayt[aria-hidden="false"] .hero__metin > * {
  animation: slayt-gir 560ms cubic-bezier(.2, .7, .3, 1) both;
}
.slider__slayt[aria-hidden="false"] .hero__metin > *:nth-child(1) { animation-delay: 60ms; }
.slider__slayt[aria-hidden="false"] .hero__metin > *:nth-child(2) { animation-delay: 170ms; }
.slider__slayt[aria-hidden="false"] .hero__metin > *:nth-child(3) { animation-delay: 280ms; }

/* --- Daktilo ---
   Harfler yerlerinde durur, yalnizca gorunurlukleri acilir. Boylece satir
   sayisi bastan sabit kalir; metin buyudukce altindaki ozet ve butonlar
   asagi kaymaz. Harfleri JS uretiyor (slider.js: harfle). */
.hero__baslik .harf { opacity: 0; }
.hero__baslik .harf--gorunur { opacity: 1; }

/* Yazarken satir sonunda yanip sonen imlec */
.hero__baslik.yaziliyor::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: var(--vurgu);
  animation: imlec 620ms steps(1) infinite;
}

@keyframes imlec { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__baslik .harf { opacity: 1; }
  .hero__baslik.yaziliyor::after { display: none; }
}

@keyframes slayt-gir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slider__slayt[aria-hidden="false"] .hero__metin > *,
  .slider__slayt[aria-hidden="false"] .hero__baslik .vurgu { animation: none; }
}

/* --- Dar ekran --- */
@media (max-width: 1024px) {
  .slider .hero__izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--b-8); }
}

@media (max-width: 860px) {
  .slider__slayt { min-height: 0; padding-block: var(--b-6) var(--b-24); }
  .slider .hero__izgara { grid-template-columns: 1fr; gap: var(--b-8); }
  .slider .hero__metin { max-width: none; }
  .slayt-zemin img { object-position: center; }
  .slayt-perde {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--zemin-koyu) 94%, transparent)   0%,
      color-mix(in srgb, var(--zemin-koyu) 86%, transparent)  55%,
      color-mix(in srgb, var(--zemin-koyu) 93%, transparent) 100%);
  }
}

/* ==========================================================================
   Sahne: egik rozet + katmanli kart yigini
   turknet karsiligi: egik fiyat karti ve ust uste binen gorseller.
   Tek duz kart "sablon" gibi duruyordu; egim ve katman derinlik veriyor.
   ========================================================================== */

/* ==========================================================================
   Sahne: egik rozet + katmanli kart yuvasi

   Kart SAHTE ICERIK TASIMAZ. Gercek urun ekran goruntusunun oturacagi bos
   cercevedir. Icindeki yer tutucu, teslim edilecek dosyanin olcusunu ve
   formatini yazar. Gorsel geldiginde .yuva blogunun yerine <img> konur;
   cerceve, golge ve duzen aynen kalir.
   ========================================================================== */

.slider .hero__izgara {
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--b-12);
  align-items: center;
  width: 100%;
}

/* .sahne* ve .yuva* kurallari 2026-09-22'de SILINDI. Dort slaydin da
   sagindaki urun karti kaldirilinca bu bilesenlerin hicbir kullanicisi
   kalmadi (isaretlemede denetlendi). */

@media (max-width: 1024px) {
  .slider .hero__izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--b-8); }
}

@media (max-width: 860px) {
  .slider .hero__izgara { grid-template-columns: 1fr; gap: var(--b-12); }
}

/* ==========================================================================
   Entegrasyonlar

   Onceki hali zayifti: logolar %55 opakliktaydi ve serbest izgarada
   dagilmisti, kagit gibi soluk gorunuyordu. Bu surumde:
     - once SAYIYLA kanit verilir (33 entegrasyon, 5 kategori, GMP3+TSM)
     - her logo kendi cercevesinde durur, izgara sikilesir
     - logolar TAM OPAKLIKTA gri; hover'da kendi rengine doner
   ========================================================================== */

.ent-bas {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--b-12);
  align-items: end;
  margin-bottom: var(--b-12);
}

/* OPTIK HIZA: kartlar 10px asagi aliniyor.
   .ent-bas "align-items: end" ile kutu tabanlarini hizaliyor, ama solda
   taban bir PARAGRAF kutusunun alti - satir yuksekligi 1.7 oldugu icin
   yazinin gorunen alti kutu tabaninin epey ustunde kaliyor. Iki kutu
   matematiksel olarak hizali, gozle hizasiz duruyor.
   transform kullanildi, margin degil: yerlesime hic dokunmuyor, yalnizca
   cizimi kaydiriyor. Asagidaki 48px'lik bosluk oldugu gibi kaliyor. */
.ent-sayi {
  transform: translateY(10px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--b-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ent-sayi li {
  padding: var(--b-4) var(--b-3);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  text-align: center;
}
/* Ikon DEGERIN USTUNDE. Yan yana koyulamiyor: kart ici genislik yalnizca
   103px ve "GMP3 + TSM" 28px'te zaten 175px, yani halihazirda iki satira
   kiriliyor. Ikonu yanina koymak metin sutununu 73px'e dusurup "GMP3"u bile
   tek satira sigmaz hale getirirdi.
   Kompozisyon esit ritimli: ikon - 8px - deger - 8px - etiket. Ikon 22px,
   degerin 28px'ine yakin; kucuk bir dekorasyon gibi durmuyor. */
.ent-sayi__ikon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto var(--b-2);
  color: var(--vurgu);
}
.ent-sayi b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--metin);
}
.ent-sayi b em { font-style: normal; color: var(--vurgu); }
.ent-sayi span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--metin-ikincil);
  margin-top: var(--b-2);
}

/* --- Grup --- */
.ent-grup {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--b-8);
  padding-block: var(--b-8);
  border-top: 1px solid var(--kenarlik);
}
.ent-grup__ad {
  display: flex;
  align-items: center;
  /* 8px -> 4px: ikon yer kapliyor ve baslik sutunu 15rem sabit. Olculdu:
     8px aralikta "Odeme kaydedici cihaz" (182px) ile kalan yer (182px)
     tam tamina esit, yani her an ikinci satira kirilir. 4px'te 4px pay
     kaliyor. Rozetin nefesi ayrica margin-left ile korunuyor. */
  gap: var(--b-1);
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
/* Kategori ikonu: ana sayfadaki ikon ailesiyle ayni cizim dili
   (24x24 kutu, 1.6 kalinlik, yuvarlak uclar), RestoPOS kirmizisi.
   Yuzey yok - burada daire zemin basligi agirlastiriyordu. */
.ent-grup__ikon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--vurgu);
}
.ent-grup__adet {
  margin-left: var(--b-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px var(--b-2);
  background: var(--zemin-vurgu);
  color: var(--vurgu-koyu);
  border-radius: var(--r-xs);
}
.ent-grup__not {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin-top: var(--b-2);
}

/* --- Kategori illustrasyonu ---
   "Bu grup ne ise yarar" sorusunu cizim, "hangi sistemler" sorusunu sagdaki
   logolar yanitliyor. Kart, cerceve, golge YOK: gorselin beyaz zemini bolum
   zeminiyle dogrudan birlesiyor.

   Gorsel KIRPILMIYOR - kullanicinin verdigi tuval oldugu gibi kullanilir.
   Baslik ve aciklama HTML'de gorunur kalir; gelecek gorsellerde ust metin
   bandi olmayacak, yani ayni yazi iki kez gorunmeyecek.
   Kirpilma yok - genislik %100, yukseklik auto, yani dogal oranini (2.69:1)
   koruyor ve hicbir kutuya zorlanmiyor. object-fit ayrica yaziliyor: ileride
   biri sabit yukseklik verirse kirpma yine olmasin. */
.ent-grup__gorsel {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: var(--b-4);
}
/* Tek seferlik giris - mevcut .ent-grup--gorunur gozlemcisine baglaniyor,
   yeni bir JS yok. "backwards": bitis karesi kalici kalmasin. */
.ent-grup--gorunur .ent-grup__gorsel {
  animation: ent-gorsel-giris 500ms ease-out backwards;
}
@keyframes ent-gorsel-giris {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Logo izgarasi --- */
.ent-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--b-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ent-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: 7rem;
  padding: var(--b-3) var(--b-2);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  /* 200ms: istenen 180-220ms araliginin ortasi. --gecis (160ms) disarida
     kaliyordu, bu yuzden burada acik yaziliyor. */
  transition: border-color 200ms ease, box-shadow 200ms ease,
              transform 200ms ease;
}
.ent-kutu img {
  width: 100%;
  height: auto;
  /* Tam opaklik: logolar okunur kalir. Gri ton, paletin disina cikmalarini onler. */
  filter: grayscale(1) contrast(1.08);
  transition: filter 200ms ease;
}
/* Hover: logo kendi marka renklerine doner, kart 2px yukselir, kenarlik
   cok hafif kirmiziya gecer, hafif golge alir. BUYUME YOK - ne kartta
   ne logoda scale kullaniliyor. */
.ent-kutu:hover {
  /* Saha taslagi rgba(239,0,39,.32) diyordu; ayni sey bizim kirmizimizla:
     --vurgu'nun %32'si. Beyaz kart uzerinde ikisi de red-200 tonunu veriyor,
     goz farki yok (olculdu). */
  border-color: color-mix(in srgb, var(--vurgu) 32%, transparent);
  box-shadow: var(--sh-kalk);
  transform: translateY(-2px);
}
.ent-kutu:hover img { filter: none; }

/* --- Kaydirinca devreye girme ---
   .ent-grup--gorunur sinifini gorunum.js ekliyor (IntersectionObserver,
   %28 esik). Bir kez eklenir ve KALDIRILMAZ: kullanici yukari asagi
   gezindiginde animasyon tekrar tekrar oynarsa "izlenen" bir efekte
   doner. Istenen, bir kez sessizce devreye girmesi.

   DIKKAT - dolgu kipi "backwards", "both" DEGIL. Sebep: "both" bitis
   karesini kalici kiliyor, yani kartin uzerinde surekli
   "transform: translateY(0)" duruyor ve :hover'daki translateY(-2px) bir
   daha ASLA calismiyordu. "backwards" yalnizca gecikme boyunca baslangic
   karesini uyguluyor; animasyon bitince kart normal kurallarina donuyor,
   hover yeniden calisiyor. */
.ent-grup__ikon { transform-origin: center; }
.ent-grup--gorunur .ent-grup__ikon { animation: ent-nabiz .45s ease-out 1; }

.ent-grup--gorunur .ent-kutu {
  animation: ent-uyanis .45s ease-out backwards;
  /* --i kart sirasi; gorunum.js atiyor. Kartlar ayni anda degil, sirayla
     uyaniyor. */
  animation-delay: calc(180ms + var(--i, 0) * 70ms);
}

@keyframes ent-nabiz {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes ent-uyanis {
  from { opacity: .72; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ent-grup__ikon,
  .ent-grup__gorsel,
  .ent-kutu { animation: none !important; transition: none !important; }
}

/* Sube sayisi - eski sitede her referansta yoktu, olanda gosterilir */
.ent-kutu__sube {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--metin-ikincil);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-xs);
  padding: var(--b-1) var(--b-2);
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.ent-kutu:hover .ent-kutu__sube {
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-color: var(--zemin-vurgu);
}

.ent__alt { margin-top: var(--b-8); padding-top: var(--b-8); border-top: 1px solid var(--kenarlik); }

@media (max-width: 960px) {
  .ent-bas { grid-template-columns: 1fr; gap: var(--b-8); align-items: start; }
  .ent-grup { grid-template-columns: 1fr; gap: var(--b-4); }
  /* Tek sutunda gorsel tam genislige yayilip logo izgarasini ezmesin. */
  .ent-grup__gorsel { max-width: 22rem; }
}
@media (max-width: 560px) {
  /* Tek sutuna dusunce kartlar metnin ALTINA geciyor; yan yana hiza
     sorunu kalmadigi icin optik kaydirma da gereksiz. */
  .ent-sayi { grid-template-columns: 1fr; transform: none; }
  /* Dar ekranda kart yatay akiyor; ikon metin temel cizgisine degil
     ortaya hizalanmali, yoksa 22px'lik kare yaziyla ayni cizgiye oturup
     asagi kayiyor. */
  .ent-sayi li { display: flex; align-items: center; gap: var(--b-3); text-align: left; }
  .ent-sayi__ikon { margin: 0; }
  .ent-sayi span { margin-top: 0; }
  .ent-izgara { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--b-2); }
  .ent-kutu { min-height: 6rem; padding: var(--b-2); gap: var(--b-1); }
}

/* ==========================================================================
   Niyet ayirici
   turknet'teki "Evimde internet yok / Baska operatorden geciyorum" kurgusunun
   karsiligi. Bizdeki gercek ayrim tek sube / zincir - kendi urun metinlerinizde
   defalarca gecen bolunme. Ziyaretciyi tek tiklamayla dogru aileye goturur.
   ========================================================================== */
.ayirici {
  padding: var(--b-12);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.ayirici__bas { text-align: center; max-width: 62ch; margin: 0 auto var(--b-8); }
.ayirici__bas p {
  font-size: var(--fs-base);
  color: var(--metin-ikincil);
  margin-top: var(--b-3);
}
.ayirici__secim { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-4); }

.secenek {
  display: flex;
  align-items: center;
  gap: var(--b-4);
  padding: var(--b-4) var(--b-6);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.secenek:hover { border-color: var(--vurgu); box-shadow: var(--sh-md); color: inherit; }

.secenek__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  background: var(--zemin-vurgu);
  border-radius: var(--r-md);
}
.secenek__ikon svg { width: 24px; height: 24px; color: var(--vurgu-koyu); fill: none; stroke: currentColor; }

.secenek__metin { flex: 1; min-width: 0; }
.secenek__metin b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.secenek__metin span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin-top: var(--b-1);
}

.secenek__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kenarlik-koyu);
  border-radius: var(--r-md);
  transition: background var(--gecis), border-color var(--gecis);
}
.secenek__ok .ikon { color: var(--metin); }
.secenek:hover .secenek__ok { background: var(--vurgu); border-color: var(--vurgu); }
.secenek:hover .secenek__ok .ikon { color: var(--metin-ters); }

@media (max-width: 860px) {
  .ayirici { padding: var(--b-6); }
  .ayirici__secim { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hizli erisim seridi
   Dort gercek kanal. WhatsApp hatti eski site icerigindeydi ama hicbir yerde
   kullanilmiyordu; buraya alindi.
   ========================================================================== */
.serit { border-top: 1px solid var(--kenarlik); padding-block: var(--b-12); }
.serit__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.serit__liste li + li { border-left: 1px solid var(--kenarlik); }
.serit__liste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-1);
  padding: var(--b-2) var(--b-4);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.serit__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--b-2);
  background: var(--zemin-vurgu);
  border-radius: var(--r-md);
  transition: background var(--gecis);
}
.serit__ikon svg { width: 24px; height: 24px; color: var(--vurgu-koyu); fill: none; stroke: currentColor; transition: color var(--gecis); }
.serit__liste a:hover .serit__ikon { background: var(--vurgu); }
.serit__liste a:hover .serit__ikon svg { color: var(--metin-ters); }

.serit__liste b {
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.serit__liste a > span:last-child {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
}

@media (max-width: 760px) {
  .serit__liste { grid-template-columns: 1fr 1fr; gap: var(--b-6) 0; }
  .serit__liste li:nth-child(odd) { border-left: 0; }
  .serit__liste li:nth-child(n+3) { border-top: 1px solid var(--kenarlik); padding-top: var(--b-6); }
}
@media (max-width: 420px) {
  .serit__liste { grid-template-columns: 1fr; }
  .serit__liste li + li { border-left: 0; border-top: 1px solid var(--kenarlik); padding-top: var(--b-6); }
}

/* ==========================================================================
   Icerik bilesenleri (urun sayfalari)

   Ham metinde 396 madde duz <li> olarak duruyordu. Iki ayri tur oldugu
   olculdu: 116 kisa (ortanca 18 karakter) ve 280 uzun (ortanca 100).
   Kisa olanlar rozet, uzun olanlar kart, ikincil bolumler akordiyon.
   ========================================================================== */

/* --- Rozet seridi: kisa, tek kelimelik vaatler --- */
.rozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  list-style: none;
  margin: var(--b-6) 0 var(--b-8);
  padding: 0;
  max-width: none;
}
/* 2026-09-26 (kullanici): eski hali pembe zemin + kirmizi yazi + kirmizi cerceveydi; "normal
   sistemlerde bu hata stilidir". Uyari etiketi gibi okunuyor, dugme saniliyordu ve "kirmizi
   yalnizca aksan" kuralina aykiriydi. Yeni: beyaz zemin, ince GRI cerceve, koyu yazi; kirmizi
   yalnizca oncesindeki kucuk tikte. Hover yok - dugme sanilmasin. */
.rozet-serit li {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--metin);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-md);
  padding: var(--b-1) var(--b-3);
  margin: 0;
  line-height: 1.3;
}
/* Tik: iki kenarligi dondurulmus kutu - ikon dosyasi gerekmez, renk jetondan. */
.rozet-serit li::before {
  content: "";
  flex: none;
  width: .35em;
  height: .65em;
  margin: -.25em .15em 0 .1em;
  border: solid var(--vurgu);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Ozellik kartlari: tam cumlelik aciklamalar --- */
.ozellik-izgara {
  display: grid;
  gap: var(--b-4);
  list-style: none;
  margin: var(--b-6) 0 var(--b-8);
  padding: 0;
  max-width: none;
}
.ozellik-izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozellik-izgara--1 { grid-template-columns: minmax(0, 1fr); }

.ozellik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--b-3);
  align-items: start;
  padding: var(--b-4);
  margin: 0;
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis);
}
.ozellik:hover { border-color: var(--kenarlik-koyu); }

.ozellik__im {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ozellik b {
  grid-column: 2;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
  margin-bottom: var(--b-1);
}
.ozellik span {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}
/* Baslik yoksa metin tek satira yayilir */
.ozellik > span:first-of-type:not(:nth-child(3)) { grid-row: 1 / span 2; }

/* --- Akordiyon: ikincil detaylar. Native <details>, JS gerekmez. --- */
.akordiyon-blok {
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  background: var(--zemin);
  margin: var(--b-6) 0 var(--b-8);
  max-width: none;
}
.akordiyon-blok summary {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  padding: var(--b-4) var(--b-6);
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
  cursor: pointer;
  list-style: none;
}
.akordiyon-blok summary::-webkit-details-marker { display: none; }
.akordiyon-blok summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  margin-left: auto;
  border-right: 2px solid var(--metin-soluk);
  border-bottom: 2px solid var(--metin-soluk);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--gecis);
}
.akordiyon-blok[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.akordiyon-blok summary span {
  font-family: var(--font-govde);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-radius: var(--r-xs);
  padding: 2px var(--b-2);
}
.akordiyon-blok summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; border-radius: var(--r-lg); }

.akordiyon-blok__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-3) var(--b-8);
  list-style: none;
  margin: 0;
  padding: 0 var(--b-6) var(--b-6);
  border-top: 1px solid var(--kenarlik);
  padding-top: var(--b-4);
}
.akordiyon-blok__liste li {
  position: relative;
  padding-left: var(--b-4);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin: 0;
}
.akordiyon-blok__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  background: var(--vurgu);
  border-radius: 50%;
}

/* Liste yerine duz yanit (SSS, 2026-09-23). Sol kenar sorunun metniyle
   hizali: ikisi de ayni --b-6 dolgudan basliyor. */
.akordiyon-blok__metin {
  padding: 0 var(--b-6) var(--b-5);
  max-width: var(--genislik-metin);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}

@media (max-width: 760px) {
  .ozellik-izgara--2 { grid-template-columns: minmax(0, 1fr); }
  .akordiyon-blok__liste { grid-template-columns: minmax(0, 1fr); }
  .akordiyon-blok summary { padding: var(--b-4); }
  .akordiyon-blok__liste { padding-inline: var(--b-4); }
  .akordiyon-blok__metin { padding-inline: var(--b-4); }
}

/* Karsilastirma tablosu: ilk sutun urun adi (baglanti), ikinci sutun tanim.
   Tanimlarin tamami urunlerin kendi sayfalarindaki ilk cumleden uretilir. */
.tablo--karsilastirma th[scope="row"] {
  background: var(--zemin);
  font-family: var(--font-baslik);
  font-weight: 700;
  width: 34%;
  vertical-align: top;
}
.tablo--karsilastirma th[scope="row"] a { color: var(--metin); text-decoration: none; }
.tablo--karsilastirma th[scope="row"] a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.tablo--karsilastirma td { color: var(--metin-ikincil); line-height: var(--lh-genis); }
.tablo--karsilastirma tbody tr:hover th[scope="row"],
.tablo--karsilastirma tbody tr:hover td { background: var(--zemin-alt); }

@media (max-width: 640px) {
  .tablo--karsilastirma th[scope="row"] { width: auto; }
  .tablo--karsilastirma thead { display: none; }
  .tablo--karsilastirma tr { display: block; border-bottom: 1px solid var(--kenarlik); }
  .tablo--karsilastirma th[scope="row"],
  .tablo--karsilastirma td { display: block; border-bottom: 0; padding-block: var(--b-2); }
  .tablo--karsilastirma th[scope="row"] { padding-bottom: 0; }
}

/* Referanslar sayfasi: bolum basliginda adet rozeti, ust kisimda sayi kutulari */
.bolum__adet {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--b-3);
  font-family: var(--font-govde);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-radius: var(--r-xs);
  padding: 2px var(--b-2);
}
.ent-sayi--referans { max-width: 44rem; }

/* ==========================================================================
   Iletisim sayfasi: ofis kartlari ve ulasim kanallari
   Dar metin sutununun (68ch) icinde durur, 480px altinda tek sutuna iner.
   Kartlarin icerigi data/sayfalar.json -> site.ofisler icinden uretilir.
   ========================================================================== */
.ofis-izgara {
  display: grid;
  /* Sabit tavan: metin sutunu artik 1200px'e kadar acilabiliyor, esit bolunen
     iki sutun kartlari 590px'e cikarip iki satirlik adresi seyreltiyordu. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
  gap: var(--b-4);
  margin-bottom: var(--b-4);
}
/* .metin p kart basligini da yakaliyor; kart ritmini geri al */
.ofis-izgara .kart__baslik { margin-bottom: var(--b-2); }
.ofis-adres {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}

.ofis-kanal {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--b-3) var(--b-6);
  margin: 0;
}
.ofis-kanal dt { font-weight: 700; }
.ofis-kanal dd { margin: 0; color: var(--metin-ikincil); }

@media (max-width: 480px) {
  .ofis-izgara { grid-template-columns: 1fr; }
  .ofis-kanal { grid-template-columns: 1fr; gap: var(--b-1); }
  .ofis-kanal dd { margin-bottom: var(--b-3); }
}

/* ==========================================================================
   Urun detay sayfalari: RSManager ve RSManager QR Menu (2026-09-23)
   Kaynak: _kaynak/rsmanager.html ve _kaynak/webkasa.html prototipleri.
   Prototiplerin CSS'i KULLANILMADI (RestoOne ile ayni karar); yalnizca
   anlati yapisi alindi. Sayfalar mevcut bilesenlerle kuruldu - asagidakiler
   yalnizca karsiligi olmayan dort parca: numarali adimlar, modul gruplari,
   SSS dizisi ve kanal etiketleri.
   ========================================================================== */

/* Bolumu bitiren izgara ya da serit alta kendi boslugunu eklemesin; bolumun
   dolgusu yeter. Uretilen sayfalarda bu ikisi .metin icinde durdugu icin
   bu kurala takilmazlar. */
.kap > .ozellik-izgara:last-child,
.kap > .rozet-serit:last-child { margin-bottom: 0; }

/* --- Numarali adimlar ---
   Sira anlam tasidigi icin <ol>. Numara ikon yuzeyi dilinde: 2rem acik
   kirmizi daire, icinde kirmizi rakam (.vitrin-kart__ikon ile ayni olcu).
   Kart dili .vitrin-kart ile ayni: beyaz, ince kenarlik, 8px, golgesiz. */
.adimlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.adimlar--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.adim {
  margin: 0;
  padding: var(--b-5);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.adim__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--b-3);
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-radius: 50%;
}
.adim__baslik {
  font-size: var(--fs-base);
  margin-bottom: var(--b-2);
}
.adim p {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
}

/* --- Modul gruplari ---
   Solda grup adi ve tek cumlelik tanim, sagda o grubun kartlari. Yerlesim
   entegrasyon grubundakiyle ayni mantikta (15rem + izgara, ust cizgiyle
   ayrilan gruplar) ama .ent-grup KULLANILMADI: o bilesen kilitli ve
   gorunum.js'in logo animasyonuna bagli. */
.modul-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  margin-bottom: var(--b-8);
}
.modul {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--b-8);
  padding-block: var(--b-8);
  border-top: 1px solid var(--kenarlik);
  /* Yapiskan menunun altinda kalmasin: capaya atlayinca grup adi gorunur. */
  scroll-margin-top: var(--b-16);
}
.modul:last-child { padding-bottom: 0; }
.modul__not {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  margin-top: var(--b-2);
}

/* --- SSS ---
   Native <details>, JS yok. Yuzey .akordiyon-blok'tan; burada yalnizca
   sorular arasi ritim. Tek sutun, okuma genisliginde. */
.sss { display: grid; gap: var(--b-3); max-width: 52rem; }
.sss .akordiyon-blok { margin: 0; }

/* --- Kanal etiketleri ---
   Kartlarin altinda, kucuk bir etiketle: etiketsiz bir rozet dizisi "bunlar
   ne?" sorusunu cevapsiz birakiyordu. */
.kanallar { margin-top: var(--b-8); }
.kanallar .bolum__ust { margin-bottom: var(--b-3); }
.kanallar .rozet-serit { margin: 0; }

@media (max-width: 1024px) {
  .adimlar,
  .adimlar--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5 adim ikili izgarada 2+2+1 kaliyor; sonuncu tam satira yayilir,
     artik gibi durmaz. */
  .adimlar--5 .adim:last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .modul { grid-template-columns: minmax(0, 1fr); gap: var(--b-4); }
}
@media (max-width: 560px) {
  .adimlar,
  .adimlar--5 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Ana sayfa yeni bolumleri ve urun yelpazesi (2026-09-26)
   Onizlemeden (_onizleme/yapi/) tasindi, kullanici onayiyla: kimlik slayti,
   "Tek sistem", "Kimler icin" (vitrinler + gecis), cozum gezgini, teklif
   yolu, urun yelpazesi. Yalnizca jetonlar; kirmizi yalnizca aksan.
   ========================================================================== */
/* cozum gezgini. Yalnizca site jetonlari (tokens.css); serbest renk yok. */
.gezgin { display: grid; gap: var(--b-2); }
.gezgin__sec {
  display: flex; align-items: center; gap: var(--b-3); width: 100%; text-align: left;
  padding: var(--b-3) var(--b-4); font: inherit; font-weight: 700; color: var(--metin);
  background: var(--zemin); border: 1px solid var(--kenarlik); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color var(--gecis), box-shadow var(--gecis);
}
.gezgin__sec:hover { border-color: color-mix(in srgb, var(--vurgu) 40%, var(--kenarlik)); }
.gezgin__sec[aria-expanded="true"] { border-color: var(--vurgu); box-shadow: inset 3px 0 0 var(--vurgu); }
.gezgin__sec .gezgin__ikon { width: 20px; height: 20px; flex: none; color: var(--vurgu-koyu); }
.gezgin__sec .gezgin__ok { width: 14px; height: 14px; margin-left: auto; color: var(--metin-soluk); transition: transform var(--gecis); }
.gezgin__sec[aria-expanded="true"] .gezgin__ok { color: var(--vurgu); }
.gezgin__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: var(--b-6); align-items: center;
  padding: var(--b-8); background: var(--zemin); border: 1px solid var(--kenarlik); border-radius: var(--r-lg);
}
.gezgin__panel[hidden] { display: none; }
.gezgin__metin { display: grid; gap: var(--b-3); align-content: start; }
.gezgin__metin h3 { font-size: var(--fs-2xl); line-height: var(--lh-sikisik); margin: 0; }
.gezgin__metin p { margin: 0; }
.gezgin__metin p:not(.bolum__ust) { color: var(--metin-ikincil); }
.gezgin__metin .rozet-serit { margin: 0; padding: 0; }
.gezgin__isler { display: flex; flex-wrap: wrap; gap: var(--b-1) var(--b-4); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.gezgin__isler span { color: var(--metin-soluk); }
.gezgin__isler a { font-weight: 700; text-decoration: none; }
.gezgin__isler a:hover { text-decoration: underline; }
.gezgin__gorsel { margin: 0; }
.gezgin__gorsel img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.gezgin__karo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--zemin-vurgu); }
.gezgin__karo svg { width: 72px; height: 72px; color: var(--vurgu); }
.gezgin__alt { display: flex; flex-wrap: wrap; gap: var(--b-3); margin-top: var(--b-6); }
/* JS hazirsa: masaustunde liste solda, secili panel sagda (JS yoksa alt alta, hepsi acik) */
@media (min-width: 961px) {
  .gezgin--hazir { grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: var(--b-6); align-items: start; }
  .gezgin--hazir .gezgin__sec { grid-column: 1; }
  .gezgin--hazir .gezgin__panel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }
}
@media (max-width: 960px) {
  .gezgin__panel { grid-template-columns: 1fr; padding: var(--b-5); }
  .gezgin__gorsel, .gezgin__karo { max-width: 26rem; }
  .gezgin__sec[aria-expanded="true"] .gezgin__ok { transform: rotate(90deg); }
}

/* tek sistem, dort is alani. Yalnizca site jetonlari. Kesikli kirmizi cizgi
   (sitedeki "Hepsi bir arada" gorselinin dili) alanlarin BAGLI oldugunu anlatir, sira degil. */
.sistem { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b-4);
  list-style: none; margin: var(--b-10) 0 0; padding: 0; }
.sistem::before { content: ""; position: absolute; top: 1.375rem; z-index: 0;
  left: calc((100% - 3 * var(--b-4)) / 8); right: calc((100% - 3 * var(--b-4)) / 8);
  border-top: 2px dashed color-mix(in srgb, var(--vurgu) 55%, transparent); }
.sistem__oge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
/* ikon kartin USTUNDE durur; kesikli cizgi ikon merkezlerinden gecer, ikonun beyaz zemini cizgiyi keser */
.sistem__ikon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  margin-bottom: var(--b-4); border-radius: 50%; background: var(--zemin); border: 2px solid var(--vurgu); color: var(--vurgu); }
.sistem__ikon svg { width: 22px; height: 22px; }
.sistem__kart { display: flex; flex-direction: column; gap: var(--b-2); width: 100%; flex: 1; text-align: center;
  padding: var(--b-5); background: var(--zemin); border: 1px solid var(--kenarlik); border-radius: var(--r-lg); }
.sistem__alan { font-size: var(--fs-xs); font-weight: 700; color: var(--vurgu-koyu); }
.sistem__kart h3 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-sikisik); }
.sistem__kart p { margin: 0; font-size: var(--fs-sm); color: var(--metin-ikincil); }
.sistem__kart .sistem__urun { margin-top: auto; padding-top: var(--b-3); border-top: 1px solid var(--kenarlik);
  font-size: var(--fs-xs); color: var(--metin-soluk); }
.sistem-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-4); margin-top: var(--b-4); }
.sistem-alt > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--b-4); align-items: center;
  padding: var(--b-5) var(--b-6); background: var(--zemin-alt); border: 1px solid var(--kenarlik); border-radius: var(--r-lg); }
.sistem-alt svg { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--vurgu); }
.sistem-alt b { font-family: var(--font-baslik); }
.sistem-alt span { font-size: var(--fs-sm); color: var(--metin-ikincil); }
@media (max-width: 900px) {
  .sistem { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--b-6); }
  .sistem::before { display: none; }
  .sistem-alt { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .sistem { grid-template-columns: 1fr; } }

/* "Kimler icin" bolumu. Yalnizca site jetonlari. */
/* Vitrinler: sitenin .vitrin bileseni aynen. "Yapilar cok yakin" (kullanici, 2026-09-26): zemin beyaz
   kaliyor (gorsel tarifi beyaza gore), ayrimi ince cizgi + genis bosluk yapiyor. */
#kapilar .bolum__bas { margin-bottom: var(--b-16); }
.kapi-vitrinler { display: grid; gap: 0; }
.kapi-vitrinler .vitrin + .vitrin { margin-top: var(--b-16); padding-top: var(--b-16); border-top: 1px solid var(--kenarlik); }
.kapi-vitrinler .vitrin { scroll-margin-top: 96px; }
.kapi-vitrinler .vitrin__gorsel { position: relative; }
.kapi-vitrin__baslik { font-size: var(--fs-3xl); line-height: var(--lh-sikisik); margin: 0; }
/* Gecis: solda soru ve dugme, sagda ziyaretcinin uc sorusu ve cevaplari */
.gecis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--b-12); align-items: start;
  margin-top: var(--b-16); padding-top: var(--b-16); border-top: 1px solid var(--kenarlik); scroll-margin-top: 96px; }
.gecis__ust { margin: 0 0 var(--b-2); font-size: var(--fs-sm); font-weight: 700; color: var(--vurgu-koyu); }
.gecis__bas h3 { margin: 0 0 var(--b-3); font-size: var(--fs-2xl); line-height: var(--lh-sikisik); }
.gecis__ozet { margin: 0 0 var(--b-6); color: var(--metin-ikincil); }
.gecis__sorular { display: grid; list-style: none; margin: 0; padding: 0; }
.gecis__sorular li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--b-4); row-gap: var(--b-1);
  padding-block: var(--b-5); border-bottom: 1px solid var(--kenarlik); }
.gecis__sorular li:first-child { padding-top: 0; }
.gecis__sorular li:last-child { padding-bottom: 0; border-bottom: 0; }
.gecis__ikon { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--zemin-vurgu); color: var(--vurgu); }
.gecis__ikon svg { width: 20px; height: 20px; }
.gecis__sorular b { font-family: var(--font-baslik); font-size: var(--fs-lg); color: var(--metin); }
.gecis__sorular li > span:last-child { color: var(--metin-ikincil); }
@media (max-width: 900px) {
  #kapilar .bolum__bas { margin-bottom: var(--b-12); }
  .kapi-vitrinler .vitrin + .vitrin { margin-top: var(--b-12); padding-top: var(--b-12); }
  .gecis { grid-template-columns: 1fr; gap: var(--b-8); margin-top: var(--b-12); padding-top: var(--b-12); }
}

/* teklif yolu. Yalnizca site jetonlari; .arayalim ve .form--koyu sitede zaten var. */
.teklif-yolu__fiyat {
  margin-top: var(--b-6); padding: var(--b-4) var(--b-5);
  border-left: 3px solid var(--red-400); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: color-mix(in srgb, var(--metin-ters) 6%, transparent);
  color: color-mix(in srgb, var(--metin-ters) 78%, transparent);
}
.teklif-yolu__fiyat b { display: block; margin-bottom: var(--b-1); color: var(--metin-ters); }
.arayalim__iletisim small { margin-left: var(--b-2); font-size: var(--fs-sm); color: color-mix(in srgb, var(--metin-ters) 60%, transparent); }
/* not artik formun ilk ogesi degil: sitedeki ".form > .form__not:first-child" boslugu burada verilir */
.teklif-yolu__form-bas + .form__not { margin: var(--b-4) 0 var(--b-6); }
.teklif-yolu__form-bas { margin: 0; font-family: var(--font-baslik); font-size: var(--fs-xl); font-weight: 700; color: var(--metin-ters); }
.teklif-yolu__form-bas span { display: block; margin-top: var(--b-1); font-family: inherit; font-size: var(--fs-sm); font-weight: 400; color: color-mix(in srgb, var(--metin-ters) 72%, transparent); }

/* kimlik slayti (ana sayfa, ilk slayt); 5 cubuk .slider__adimlar kuralinda. Yalnizca site jetonlari. */
.kimlik .hero__ust { color: var(--red-300); }
.kimlik .hero__metin { max-width: 40rem; }
.kimlik .hero__ozet { max-width: 38rem; }
/* Fotograf (2026-09-26) 12:5; genis ekranda slayt 3:1'e varan oranla ustten ve alttan kirpiliyor.
   Kirpma ortadan olursa iki kisinin basinin ustu kesiliyordu (1920px'te olculdu): tezgah tarafindan kirp. */
.kimlik .slayt-zemin img { object-position: 62% 25%; }
@media (max-width: 860px) { .kimlik .slayt-zemin img { object-position: center; } }

/* Urun yelpazesi (/urunler/) - ziyaretci surumu */
.yelpaze-grup { display: grid; gap: var(--b-4); }
.yelpaze-grup__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--b-2) var(--b-6); }
.yelpaze-grup__bas h2 { margin: 0; }
.yelpaze-grup__bas p { margin: 0; color: var(--metin-ikincil); max-width: 60ch; }
.yelpaze-grup__bag { display: inline-flex; align-items: center; gap: var(--b-1); font-size: var(--fs-sm); font-weight: 700; }
.yelpaze-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-2) var(--b-4); list-style: none; margin: 0; padding: 0; }
.yelpaze-oge { display: grid; gap: 2px; padding: var(--b-3) var(--b-4); background: var(--zemin); border: 1px solid var(--kenarlik); border-radius: var(--r-lg); scroll-margin-top: 96px; }
.yelpaze-oge a { font-weight: 700; color: var(--metin); text-decoration: none; }
.yelpaze-oge a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.yelpaze-oge span { color: var(--metin-ikincil); font-size: var(--fs-sm); }
@media (max-width: 760px) { .yelpaze-liste { grid-template-columns: 1fr; } }