/* ============================================================================
   desk.css — FLEXXI DESK tanıtım sitesi (flexxiyazilim.com)
   ----------------------------------------------------------------------------
   ⛔ flexxi.net'in site.css'inden BAĞIMSIZ. Kullanıcı kararı 07.09.2026:
      "sıfırdan, DESK'e özel". Oradaki bir düzeltme buraya kendiliğinden GELMEZ;
      iki dosya ayrı yaşar. Ortak görünüm aranmıyor — iki sitenin işi farklı.

   ⛔ BOOTSTRAP YOK, JAVASCRIPT YOK, DIŞ FONT YOK.
      · Bootstrap: sayfa başına ~30 KB CSS ve bize gereken düzen 12 satır grid.
      · JS: menü <details> ile, SSS <details> ile çözüldü — JS kapalıyken de çalışır.
      · Dış font: ziyaretçinin tarayıcısı üçüncü sunucuya istek atmasın (hız + KVKK).

   Renk: DESK'in kendi mavisi (#3B7BF0 / #1445A0 — ürün favicon'undan) koyu
   lacivert zemin üzerine. Mor (#422874) FLEXXI markasıdır, burada vurgu olarak
   yalnız küçük yerlerde kullanılır.
   ========================================================================== */

:root {
  /* zemin */
  --murekkep:      #0b1220;   /* en koyu — kahraman ve altbilgi */
  --mürekkep-2:    #111c33;   /* koyu yüzey — kart, şerit */
  --yuzey:         #ffffff;
  --yuzey-2:       #f5f7fc;   /* açık bölüm zemini */

  /* metin */
  --metin:         #101828;
  --metin-2:       #4a5568;   /* ikincil */
  --metin-koyu-1:  #eef2fb;   /* koyu zeminde ana metin */
  --metin-koyu-2:  #9fb0cd;   /* koyu zeminde ikincil */

  /* çizgi */
  --cizgi:         #e3e8f2;
  --cizgi-koyu:    rgba(255,255,255,.12);

  /* marka */
  --mavi:          #3b7bf0;
  --mavi-koyu:     #1445a0;
  --mavi-acik:     #7aa7f7;
  --mor:           #422874;

  --golge:      0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --golge-kalk: 0 2px 6px rgba(16,24,40,.06), 0 20px 44px rgba(16,24,40,.14);
  --yaricap:    16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--metin);
  background: var(--yuzey);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 720; letter-spacing: -.022em; line-height: 1.15; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mavi-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--mavi-acik); outline-offset: 3px; border-radius: 6px; }

/* Klavye kullanıcısı için — odaklanınca görünür. */
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mavi); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 0;
}
.atla:focus { left: 0; }

.kap { width: min(1180px, 92%); margin-inline: auto; }

/* ------------------------------------------------------------------ DÜĞME */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 12px; border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; line-height: 1; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dugme:hover { text-decoration: none; transform: translateY(-1px); }
.dugme-vurgu { background: var(--mavi); color: #fff; box-shadow: 0 8px 20px rgba(59,123,240,.32); }
.dugme-vurgu:hover { background: #2f6ee6; color: #fff; }
.dugme-hafif { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.dugme-hafif:hover { background: rgba(255,255,255,.16); color: #fff; }
.dugme-cizgi { background: #fff; color: var(--metin); border-color: var(--cizgi); }
.dugme-cizgi:hover { border-color: var(--mavi); color: var(--mavi-koyu); }

/* ------------------------------------------------------------------- MENÜ */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,18,32,.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--cizgi-koyu);
}
/* gap 1.5 → 0.8rem: marka + dil seçimi + sekiz menü maddesi + CTA tek satıra
   ancak böyle sığıyor (ölçüldü; 1rem'de 6 px taşıyordu). */
.ust-ic { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; }

/* ⚠️ flex:0 0 auto — marka ASLA sıkışmaz. Öncesinde flex esnemesi logoyu
   eziyordu: 1080 px'te marka kutusu 174 px'ten 67 px'e düşüyor, 567×158'lik
   logo yamuluyordu. Yer daralınca menü mobil hâle geçer, logo küçülmez. */
.marka { display: flex; align-items: center; gap: .65rem; color: #fff; flex: 0 0 auto; }
.marka:hover { text-decoration: none; }
.marka-rozet {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(140deg, var(--mavi), var(--mavi-koyu));
  color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1;
}
/* Üst menüdeki FLEXXI logosu. Yükseklik flexxi.net'teki (34px) ile aynı ailede
   tutuldu; buradaki menü çubuğu biraz daha alçak olduğu için 30px.
   ⚠️ width:auto ŞART — logo 567×158 ve en-boy oranı bozulursa marka bozulur. */
.marka-logo { display: block; height: 30px; width: auto; flex: 0 0 auto; }
/* Ürün adı logonun yanında, ince bir çizgiyle ayrılıyor: "FLEXXI" markadır,
   "DESK" o markanın ürünü — ikisi aynı yazı gibi okunmasın. */
.marka-ad {
  font-weight: 800; letter-spacing: .06em; font-size: .98rem; color: #fff;
  padding-left: .7rem; border-left: 1px solid var(--cizgi-koyu); line-height: 1.1;
}

.menu { display: flex; gap: .35rem; margin-left: auto; }
.menu-bag {
  /* ⚠️ nowrap ŞART: "Kasa ve Fatura", "Cari ve Acenta", "Yasal Bildirimler"
     iki kelimeli ve yer daralınca satır ortasından bölünüyorlardı — menü üç
     satıra çıkıp üst şerit 64 px'ten 118 px'e fırlıyordu. Etiket bölünmesin;
     yer yetmiyorsa aşağıdaki kırılma noktası mobil menüye geçirir. */
  /* ⚠️ Ölçü .5/.8rem + .95rem idi. Menüye dil seçimi eklenince (≈90 px) satır
     HİÇBİR genişlikte sığmaz oldu: 1440'ta bile CTA kapsayıcıdan 76 px taşıyordu
     (marka 174 + dil 90 + menü 792 + CTA 141 + boşluklar = 1269 px, kapsayıcı en
     çok 1180). Sekiz menü maddesi kısaltılamaz, o yüzden ölçü küçültüldü. */
  padding: .45rem .55rem; border-radius: 9px; font-size: .9rem; font-weight: 550;
  color: var(--metin-koyu-2); white-space: nowrap;
}
.menu-bag:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.menu-bag.aktif { color: #fff; background: rgba(59,123,240,.22); }

/* ------------------------------------------------------------ DİL SEÇİMİ */
/* Koyu üst şeride uyarlandı (flexxi.net'te açık zemin üzerinde duruyor).
   Seçili olmayan dil soluk: hangi dilde olduğun yazıdan olduğu kadar bayrağın
   canlılığından da anlaşılsın. */
.dil-secim { display: flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.dil-bag {
  display: inline-flex; align-items: center; gap: .32rem;
  color: var(--metin-koyu-2); font-weight: 650; font-size: .86rem;
  padding: .28rem .4rem; border-radius: 7px;
}
.dil-bag:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.dil-bag.secili { color: #fff; }
.dil-ayrac { color: var(--cizgi-koyu); }
/* ⚠️ Kenarlık ŞART: Union Jack'in köşeleri beyaz, Türk bayrağının kenarı
   kırmızı. Koyu zeminde kenarlıksız bayrak "yarım" görünüyor. */
.dil-bayrak {
  display: block; flex: 0 0 auto; width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
  opacity: .55; transition: opacity .15s ease;
}
.dil-bag:hover .dil-bayrak,
.dil-bag.secili .dil-bayrak { opacity: 1; }
/* Mobil listedeki kopya yalnız dar ekranda, üstteki yalnız geniş ekranda. */
.dil-secim-mobil { display: none; }

/* ⚠️ nowrap + flex:0 0 auto — "Ücretsiz Demo" iki satıra bölünüyordu ve üst
   şerit 64 px yerine 78 px oluyordu. Düğme sıkışmaz; yer yetmezse aşağıdaki
   kırılma noktası mobil menüye geçirir. */
.ust-cta { padding: .6rem 1.1rem; font-size: .95rem; white-space: nowrap; flex: 0 0 auto; }

/* Mobil menü — <details>, JavaScript yok. */
.menu-mobil { display: none; margin-left: auto; position: relative; }
.menu-mobil > summary {
  list-style: none; cursor: pointer; display: grid; gap: 5px;
  padding: .6rem; border-radius: 10px; border: 1px solid var(--cizgi-koyu);
}
.menu-mobil > summary::-webkit-details-marker { display: none; }
.menu-mobil > summary span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
.menu-mobil-liste {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  min-width: 230px; display: grid; gap: .2rem; padding: .6rem;
  background: var(--mürekkep-2); border: 1px solid var(--cizgi-koyu);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.menu-mobil-liste a { padding: .6rem .8rem; border-radius: 9px; color: var(--metin-koyu-1); font-weight: 550; }
.menu-mobil-liste a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.menu-mobil-liste .dugme { margin-top: .3rem; }

/* Masaüstü menü ile mobil menü arasındaki geçiş.
   ⚠️ Sınır 980 px'ti ve YANLIŞTI: menü sekiz maddeyle 792 px yer istiyor;
   marka (174) + CTA (141) + boşluklarla toplam ~1155 px ediyor, kapsayıcı ise
   ekranın %92'si. 980–1160 arasında sığmadığı için ya etiketler satır
   ortasından bölünüyor ya da CTA kapsayıcıdan taşıyordu.
   ⚠️ Sınır İKİ KEZ ÖLÇÜLEREK belirlendi: önce 980 → 1160 (logo eklenince),
      sonra 1160 → 1300 (dil seçimi eklenince ≈90 px daha yer istedi).
      Masaüstü menüsü için gereken genişlik: marka 174 + dil 90 + menü 699 +
      CTA 141 + boşluklar ≈ 1150 px; kapsayıcı ekranın %92'si, yani viewport
      en az ~1300 px olmalı. Yeni bir menü maddesi eklenirse bu ölçüm
      TEKRARLANMALI (scratchpad/ust_sigma_olc.js). */
@media (max-width: 1299.98px) {
  .menu, .ust-cta { display: none; }
  .ust-ic > .dil-secim { display: none; }        /* üstteki kopya gizlenir */
  .menu-mobil { display: block; }
  .dil-secim-mobil { display: flex; justify-content: center; gap: .3rem;
                     margin-top: .5rem; padding-top: .6rem;
                     border-top: 1px solid var(--cizgi-koyu); }
  .dil-secim-mobil .dil-bayrak { width: 24px; height: 17px; opacity: 1; }
}

/* --------------------------------------------------------------- KAHRAMAN */
.kahraman {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(59,123,240,.28), transparent 62%),
    radial-gradient(700px 420px at 12% 92%, rgba(66,40,116,.35), transparent 60%),
    linear-gradient(165deg, #0b1220 0%, #0e1830 55%, #0b1220 100%);
  padding: 4.6rem 0 4.2rem;
}
/* İnce ızgara dokusu — düz koyu zemini kırar, dikkat dağıtmaz. */
.kahraman::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 560px at 30% 20%, #000 10%, transparent 76%);
}
.kahraman .kap { position: relative; z-index: 1; }
.kahraman-izgara { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: center; }
/* ⚠️ Yazı sütunu YUKARIDAN hizalanır, ortadan değil. Sebep: sağdaki görsel
   sütunu (ekran görüntüsü + altındaki düğme) yazı sütunundan uzun; align-items
   center olunca yazılar dikeyde ortalanıp etiketin üstünde koca bir boşluk
   bırakıyordu. Görsel sütunu ORTADA KALIYOR — bölümün dolgusunu kısaltmak
   yazıyla birlikte görseli de yukarı çekiyordu, istenmeyen buydu. */
.kahraman-yazi { align-self: start; }
@media (max-width: 980px) { .kahraman-izgara { grid-template-columns: 1fr; gap: 2.4rem; } }

/* Kahraman etiketi. Kullanıcı isteği 09.09.2026: belirgin biçimde büyütüldü
   (0.84 → 1.05rem, iç boşluk .38/.9 → .6/1.3rem) — üst menüdeki logodan sonra
   markayı ikinci kez, okunur boyutta söylüyor.
   ⚠️ clamp: telefonda 1.05rem etiketi iki satıra düşürüyordu; küçük ekranda
      0.9rem'e iniyor, geniş ekranda 1.05'e çıkıyor. */
.etiket {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem;
  padding: .9rem 2rem .9rem 1.5rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  font-size: clamp(1rem, 1.75vw, 1.45rem); font-weight: 600; color: var(--metin-koyu-1);
}
.etiket b { color: var(--mavi-acik); font-weight: 700; }
/* "FLEXXI" marka, "DESK" o markanın ürünü: marka beyaz, ürün mavi kalıyor.
   <i> yalnız kanca — eğik yazı DEĞİL. */
.etiket-marka { color: #fff; font-weight: 800; font-style: normal; letter-spacing: .02em; }

.kahraman h1 { font-size: clamp(2.15rem, 4.4vw, 3.35rem); margin-bottom: 1.1rem; }
.kahraman h1 em { font-style: normal; color: var(--mavi-acik); }
.kahraman-ozet {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem); color: var(--metin-koyu-2);
  max-width: 56ch; margin-bottom: 1.9rem;
}
.kahraman-dugmeler { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.1rem; }
.kahraman-not { font-size: .9rem; color: var(--metin-koyu-2); }
.kahraman-not b { color: var(--metin-koyu-1); font-weight: 650; }

/* Tarayıcı çerçevesi — ekran görüntüsü "gerçek program" gibi dursun. */
.pencere {
  border-radius: 14px; overflow: hidden; background: #fff; margin: 0;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(3,7,18,.55), 0 4px 14px rgba(3,7,18,.4);
}
.pencere-cubuk {
  display: flex; align-items: center; gap: .4rem;
  background: #e9ecf3; border-bottom: 1px solid #d8dce6; padding: .5rem .75rem;
}
.pencere-nokta { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #c4c9d6; }
.pencere-nokta:nth-child(1) { background: #ef7b6f; }
.pencere-nokta:nth-child(2) { background: #f2c15c; }
.pencere-nokta:nth-child(3) { background: #77c785; }
.pencere-adres {
  flex: 1; margin-left: .5rem; background: #fff; border-radius: 6px;
  padding: .18rem .6rem; font-size: .72rem; color: #7b8194;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kahraman görseli + altındaki flexxi.net bağlantısı.
   Düğme İKİNCİL durmalı: sayfanın asıl işi "Ücretsiz Demo"ya götürmek, bu
   bağlantı ziyaretçiyi siteden ÇIKARIYOR. O yüzden hafif zeminli ve
   soldaki ana düğmelerden bir tık küçük. */
.kahraman-gorsel { display: flex; flex-direction: column; align-items: center; }
.kahraman-diger {
  /* Üstteki boşluk 1.1rem'di ve düğme tarayıcı çerçevesine yapışık duruyordu:
     görselin gölgesi de aşağı taştığı için aradaki nefes daha da kapanıyordu.
     2.2rem'de düğme görselden ayrı bir öğe olarak okunuyor. */
  margin-top: 2.2rem; padding: .62rem 1.15rem; font-size: .92rem; font-weight: 600;
}
.kahraman-diger svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}

/* İç sayfa kahramanı — ana sayfadakinin kısa hâli: görsel yok, tek sütun.
   Sayfanın ne anlattığını söyleyip hemen içeriğe geçer. */
.kahraman-ic { padding: 3.4rem 0 3.2rem; }
.kahraman-ic h1 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); margin-bottom: .9rem; max-width: 20ch; }
.kahraman-ic .kahraman-ozet { margin-bottom: 0; max-width: 62ch; }
.kahraman-ic .bolum-ustyazi { color: var(--mavi-acik); }

/* ------------------------------------------------------------------ BÖLÜM */
.bolum { padding: 4.6rem 0; }
.bolum-acik { background: var(--yuzey-2); }
.bolum-koyu { background: var(--murekkep); color: var(--metin-koyu-1); }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-koyu .bolum-basi p { color: var(--metin-koyu-2); }

.bolum-basi { max-width: 64ch; margin-bottom: 2.8rem; }
.bolum-basi.orta { margin-inline: auto; text-align: center; }
.bolum-basi h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: .75rem; }
.bolum-basi p { color: var(--metin-2); font-size: 1.05rem; }
.bolum-ustyazi {
  display: block; font-size: .8rem; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mavi); margin-bottom: .7rem;
}
.bolum-koyu .bolum-ustyazi { color: var(--mavi-acik); }

/* ------------------------------------------------------- BENTO / KART IZGARA
   Yetenekler bölümü: farklı boyda kutular. İlk kutu iki sütun kaplar, gerisi
   tek — göz önce oraya düşsün diye. Mobilde hepsi tek sütuna iner. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bento > .kutu:first-child { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > .kutu:first-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .kutu:first-child { grid-column: span 1; }
}

.kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 1.6rem; box-shadow: var(--golge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kutu:hover { transform: translateY(-3px); box-shadow: var(--golge-kalk); border-color: #cfdcf7; }
.bolum-koyu .kutu {
  background: var(--mürekkep-2); border-color: var(--cizgi-koyu); box-shadow: none;
}
.bolum-koyu .kutu:hover { border-color: rgba(122,167,247,.45); transform: translateY(-3px); }

.kutu-ikon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1rem;
  border-radius: 11px; background: rgba(59,123,240,.12); color: var(--mavi-koyu);
}
.bolum-koyu .kutu-ikon { background: rgba(122,167,247,.16); color: var(--mavi-acik); }
.kutu-ikon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kutu h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.kutu p  { color: var(--metin-2); font-size: .96rem; }
.bolum-koyu .kutu p { color: var(--metin-koyu-2); }

.kutu-liste { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; }
.kutu-liste li { position: relative; padding-left: 1.15rem; font-size: .95rem; color: var(--metin-2); }
.kutu-liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mavi);
}
.bolum-koyu .kutu-liste li { color: var(--metin-koyu-2); }
.bolum-koyu .kutu-liste li::before { background: var(--mavi-acik); }

/* -------------------------------------------------------- EKRAN ANLATIMLARI
   Metin solda dar, ekran görüntüsü sağda geniş; sırayla ters çevrilir.
   ⚠️ ERP ekranları YOĞUN — görsel dar sütuna sıkışırsa içindeki yazı okunmaz.
      Bu yüzden görsel tarafı daha geniş tutuluyor. */
.anlat { display: grid; grid-template-columns: .82fr 1.18fr; gap: 2.6rem; align-items: center; }
.anlat + .anlat { margin-top: 3.6rem; padding-top: 3.6rem; border-top: 1px solid var(--cizgi); }
.bolum-koyu .anlat + .anlat { border-top-color: var(--cizgi-koyu); }
.anlat.ters > .anlat-metin { order: 2; }
@media (max-width: 900px) {
  .anlat { grid-template-columns: 1fr; gap: 1.6rem; }
  .anlat.ters > .anlat-metin { order: 0; }
}
/* Görseli olmayan anlatım — tek sütuna geçer ve metin genişlemez.
   ⛔ Ekranı olmayan madde için TEMSİLÎ GÖRSEL üretilmiyor; o yüzden bu hâl var. */
.anlat.tek { grid-template-columns: 1fr; }
.anlat.tek .anlat-metin { max-width: 74ch; }
.anlat-metin h3 { font-size: 1.45rem; margin-bottom: .7rem; }
.anlat-metin > p { color: var(--metin-2); }
.bolum-koyu .anlat-metin > p { color: var(--metin-koyu-2); }
.anlat-no {
  display: inline-block; margin-bottom: .6rem; font-size: .78rem; font-weight: 750;
  letter-spacing: .12em; color: var(--mavi);
}
.bolum-koyu .anlat-no { color: var(--mavi-acik); }

/* ------------------------------------------------------------------- FİYAT
   Fiyat kartı solda dar, kademe tablosu sağda geniş. Kademe tablosu KAPALI
   DEĞİL: bu sayfada tek ürün var, gizlemenin anlamı yok — ziyaretçi zaten
   fiyat için gelmiş. */
.fiyat-duzen { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 2.4rem; align-items: start; }
@media (max-width: 860px) { .fiyat-duzen { grid-template-columns: 1fr; } }

.fiyat-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  overflow: hidden; box-shadow: var(--golge);
}
.fiyat-bant {
  display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, var(--mavi), var(--mavi-koyu)); color: #fff;
}
.fiyat-bant h2 { font-size: 1.15rem; margin: 0; color: #fff; }
.fiyat-bant p  { margin: .1rem 0 0; font-size: .85rem; color: rgba(255,255,255,.82); }
.fiyat-govde { padding: 1.5rem 1.4rem 1.6rem; }
.fiyat-tutar { display: flex; align-items: baseline; gap: .3rem; margin: 0; }
.fiyat-tutar strong { font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.fiyat-tutar .pb  { font-size: 1.35rem; font-weight: 650; }
.fiyat-tutar .per { font-size: .95rem; color: var(--metin-2); margin-left: .25rem; }
.fiyat-kapsam { margin: .5rem 0 1.4rem; font-size: .93rem; color: var(--metin-2); }
.fiyat-govde .dugme { width: 100%; }

.fiyat-kademe-blok h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.kademe { width: 100%; border-collapse: collapse; font-size: .98rem; }
.kademe th, .kademe td { padding: .62rem .8rem; border-bottom: 1px solid var(--cizgi); }
.kademe tbody tr:nth-child(odd) { background: var(--yuzey); }
.kademe th { text-align: left; font-weight: 550; }
.kademe td { text-align: right; font-weight: 700; white-space: nowrap; }
.kademe tr:last-child th, .kademe tr:last-child td { border-bottom: 0; }

/* İletişim kartındaki değer — telefon/e-posta göze çarpsın. */
.il-deger { font-size: 1.05rem; font-weight: 650; color: var(--metin); }
.il-deger a { color: var(--mavi-koyu); }

/* ------------------------------------------------------------ DÜRÜSTLÜK KUTU
   "Bizde olmayan" bölümü. Reklam değil, açık bilgi — o yüzden sarı uyarı
   tonunda değil, nötr ve sakin. */
.durust {
  border: 1px solid var(--cizgi); border-left: 4px solid var(--mor);
  background: var(--yuzey); border-radius: 14px; padding: 1.7rem 1.9rem;
  max-width: 80ch;
}
.durust h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.durust p { color: var(--metin-2); }
.durust p + p { margin-top: .7rem; }

/* ------------------------------------------------- GÖRSELİ TAM EKRAN AÇMA */
/* 09.09.2026. Ekran görüntüleri sayfada küçük duruyor ve yazıları okunmuyor;
   tıklayınca tam ekran açılıyor. Betiği inc/footer.php'de. */
.buyutulebilir { cursor: zoom-in; }
.gorsel-buyut {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(10, 12, 28, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; cursor: zoom-out; overscroll-behavior: contain;
}
.gorsel-buyut img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.gorsel-buyut-kapat {
  position: absolute; top: .6rem; right: .8rem;
  width: 2.4rem; height: 2.4rem; line-height: 1; font-size: 1.7rem; color: #fff;
  background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; cursor: pointer;
}
.gorsel-buyut-kapat:hover { background: rgba(255, 255, 255, .26); }

/* ------------------------------------------------------------- GÜN AKIŞI */
/* 08.09.2026'da eklendi. Ürünü modül modül saymak yerine günün içindeki yerini
   anlatan bölüm; solda an/saat etiketi, sağda ne olduğu.
   Numaralı liste (ol) bilerek: sıra ANLAMLI, ekran okuyucu da sırayı bildirsin. */
.akis { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 88ch; }
.akis-adim {
  /* ⚠️ Sütun SABİT 8.5rem idi ve .akis-zaman'da white-space:nowrap var; etiket
     sütundan uzun olunca taşıp gövde metninin ÜSTÜNE biniyordu (iletişim
     sayfasındaki "Kendi verinizle deneme" adımında görüldü). İç sayfalarda
     etiketler saat olduğu için ("07:30", "Ay sonu") hiç ortaya çıkmamıştı.
     max-content: sütun en uzun etikete göre genişler, hizalama korunur. */
  display: grid; grid-template-columns: minmax(8.5rem, max-content) 1fr;
  gap: 1.2rem; align-items: start;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 13px;
  padding: 1.1rem 1.3rem;
}
.akis-zaman {
  font-weight: 700; font-size: .92rem; color: var(--mor);
  background: rgba(66, 40, 116, .07); border-radius: 999px;
  padding: .3rem .8rem; text-align: center; white-space: nowrap;
}
.akis-govde h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.akis-govde p  { margin: 0; color: var(--metin-2); }
@media (max-width: 575.98px) {
  .akis-adim  { grid-template-columns: 1fr; gap: .55rem; }
  .akis-zaman { justify-self: start; }
}

/* -------------------------------------------------------------------- SSS */
.sss { display: grid; gap: .7rem; max-width: 80ch; }
.sss details {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 13px;
  padding: 0 1.3rem;
}
.sss summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 0; font-weight: 640; font-size: 1.02rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 9px; height: 9px; border-right: 2px solid var(--metin-2); border-bottom: 2px solid var(--metin-2);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
.sss details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.sss details[open] summary { border-bottom: 1px solid var(--cizgi); }
.sss-govde { padding: 1rem 0 1.25rem; color: var(--metin-2); }

/* ---------------------------------------------------------------- KAPANIŞ */
.kapanis {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 4.6rem 0;
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(59,123,240,.28), transparent 62%),
    linear-gradient(140deg, var(--mavi-koyu) 0%, #14306e 55%, var(--mor) 100%);
}
.kapanis h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-bottom: .8rem; }
.kapanis p { color: rgba(255,255,255,.82); max-width: 62ch; margin: 0 auto 2rem; }
.kapanis .dugmeler { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.kapanis .dugme-vurgu { background: #fff; color: var(--mavi-koyu); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.kapanis .dugme-vurgu:hover { background: #eaf1ff; color: var(--mavi-koyu); }

/* -------------------------------------------------------------- ALTBİLGİ */
.alt { background: var(--murekkep); color: var(--metin-koyu-2); padding: 3.4rem 0 1.6rem; }
.alt h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: .9rem; font-weight: 700; }
.alt a { color: var(--metin-koyu-2); }
.alt a:hover { color: #fff; }
.alt-ic { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 2.4rem; padding-bottom: 2.2rem; }
@media (max-width: 820px) { .alt-ic { grid-template-columns: 1fr; gap: 1.8rem; } }
.alt-marka .marka-rozet { margin-bottom: .9rem; }
.alt-ozet { font-size: .95rem; margin-bottom: .5rem; }
.alt-kurulus { font-size: .9rem; color: #6c7d99; }
.alt-liste { display: grid; gap: .45rem; align-content: start; font-size: .95rem; }
.alt-iletisim address { font-style: normal; font-size: .95rem; line-height: 1.85; }
.alt-iletisim strong { color: #fff; font-weight: 600; }
.alt-son {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--cizgi-koyu); padding-top: 1.4rem;
  font-size: .88rem; color: #6c7d99;
}

/* Hukuki bağlantılar — telif satırının ÜSTÜNDE ayrı bir satır.
   Ayıran çizgi bu satıra taşındı; .alt-son'un kendi kuralına dokunulmadı,
   yalnız ardışıklık seçicisiyle çizgisi kapatıldı (hukuk satırı olmayan bir
   sayfada .alt-son eskisi gibi çizgili kalsın). */
.alt-hukuk-satir { border-top: 1px solid var(--cizgi-koyu); padding-top: 1.3rem; }
.alt-hukuk-satir + .alt-son { border-top: 0; padding-top: .8rem; }
.alt-hukuk {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  padding: 0; margin: 0; font-size: .88rem;
}

/* ------------------------------------------------------- HUKUKİ METİNLER */
/* Uzun düz metin — ölçü 68ch'te tutuldu: daha genişte göz satır başını
   kaybediyor. Sayfanın geri kalanı kart/ızgara olduğu için bu bölüm kendi
   tipografisini taşıyor. */
.hukuk-metin { max-width: 68ch; }
.hukuk-metin h2 {
  font-size: 1.12rem; margin: 2.1rem 0 .6rem; color: var(--metin);
  letter-spacing: 0; text-transform: none;
}
.hukuk-metin h2:first-child { margin-top: 0; }
.hukuk-metin p { color: var(--metin-2); margin-bottom: .8rem; line-height: 1.75; }
.hukuk-metin ul { color: var(--metin-2); margin: 0 0 .9rem 1.15rem; line-height: 1.75; }
.hukuk-metin li { margin-bottom: .4rem; }
.hukuk-kurum {
  font-style: normal; line-height: 1.8; color: var(--metin-2);
  border-left: 3px solid var(--cizgi); padding-left: .9rem; margin-bottom: .9rem;
}
.hukuk-kurum strong { color: var(--metin); }
.hukuk-bag { font-weight: 600; }
/* İngilizce sayfadaki "bağlayıcı metin Türkçedir" notu — metnin parçası değil,
   okuyanı uyaran bir not; o yüzden ayrı zemin. */
.hukuk-dil-notu {
  background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: .6rem;
  padding: .8rem 1rem; margin-bottom: 1.6rem; font-size: .93rem;
}
.hukuk-alt { margin-top: 2.2rem; font-size: .9rem; color: var(--metin-2); }

/* --------------------------------------------------------- HAZIRLANIYOR */
.hazir { padding: 5rem 0; }
.hazir h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .8rem; }
.hazir p { color: var(--metin-2); max-width: 60ch; margin-bottom: 1.8rem; }

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