/* Site gorunum katmani.
   14.08.2026: anasayfa ve sayfalar referans alinan SaaS sablonunun
   tasarim diline yaklastirildi. Olculer tarayicida okundu, tahmin yok.
   Birebir kopya degil - marka morumuz korundu, referansin mor skalasi
   zaten ayni ailede oldugu icin kimlik bozulmadi.

   Bu dosya yalniz site sayfalarinda yuklenir; panel almaz. */

:root {
  /* ── Mor skala. Referansta primary-500 #864ffe; bizim tonumuz biraz
     daha koyu ve sicak, ikisinin arasinda bir yerde durduruldu. ── */
  --mor-50:  #f5f2fe;
  --mor-100: #ece7ff;
  --mor-200: #dcd2ff;
  --mor-300: #c2adff;
  --mor-400: #a37fff;
  --mor-500: #8b4ffb;
  --mor-600: #7a34ee;
  --mor-700: #642bc4;
  --mor-800: #4a2091;
  --mor-900: #2a1350;

  --ana: var(--mor-500);
  --ana-koyu: var(--mor-600);
  --ana-acik: var(--mor-400);

  /* Altin vurgu markanin ayirt edici yani - referansta yok, bizde kaliyor.
     Referansin aksan renkleri de yaninda kullanilabilir hale getirildi. */
  --vurgu: #c2952c;
  --vurgu-acik: #e8c877;
  --aksan-sari: #f9eb57;
  --aksan-yesil: #c6f56f;
  --aksan-mercan: #ffb9a2;
  --aksan-cam: #83e7ee;

  /* ── Zeminler ── */
  --zemin: #fcfcfd;
  --zemin-2: #f9fafb;
  --zemin-3: #f4f5f8;
  --zemin-4: #f0f2f6;
  --kart: #ffffff;
  --kenar: #e3e7ed;
  --kenar-koyu: #d7dde5;

  --metin: #14161a;
  --metin-2: #3d434d;
  --metin-3: #6b727e;

  /* ── Tipografi ── */
  --yazi-baslik: "Inter Tight", "Space Grotesk", system-ui, sans-serif;
  --yazi-govde: "Inter Tight", "IBM Plex Sans", system-ui, sans-serif;

  /* ── Kose ve golge ── */
  --kose-kucuk: 8px;
  --kose-orta: 14px;
  --kose-buyuk: 20px;
  --kose-tam: 999px;
  --golge-1: 0 1px 2px rgba(20, 22, 26, .04);
  --golge-2: 0 8px 24px rgba(20, 22, 26, .06);
  --golge-3: 0 24px 64px rgba(20, 22, 26, .10);

  --gecis: .2s cubic-bezier(.4, 0, .2, 1);
}

:root[data-tema="koyu"] {
  --zemin: #0f1217;
  --zemin-2: #13171e;
  --zemin-3: #181d26;
  --zemin-4: #1f252f;
  --kart: #13171e;
  --kenar: #202731;
  --kenar-koyu: #2a333e;
  --metin: #f3f5f8;
  --metin-2: #c2c8d2;
  --metin-3: #8b93a1;
}

/* ── Tipografi olcegi ────────────────────────────────────
   Referansta h1 68/500, h2 52/400, govde 16/24, paragraf 14/21.
   Kucuk ekranda akici kuculsun diye clamp kullanildi. */
body {
  font-family: var(--yazi-govde);
  font-size: 16px;
  line-height: 1.5;
  background: var(--zemin-2);
  color: var(--metin);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); font-weight: 500; line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.25rem); font-weight: 400; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 500; line-height: 1.3; }

.bolum-alt, .kart p, .ozellik p, .adim p, .bilgi-kutu p {
  font-size: .95rem; line-height: 1.55; color: var(--metin-3);
}

/* ── Dugmeler: hap bicim ────────────────────────────────── */
.dugme {
  border-radius: var(--kose-tam);
  font-weight: 500;
  font-size: .95rem;
  padding: .72rem 1.5rem;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.dugme-ana {
  background: var(--ana); color: #fff; border: 1px solid transparent;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ana) 30%, transparent);
}
.dugme-ana:hover {
  background: var(--ana-koyu); transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ana) 38%, transparent);
}
.dugme-ikincil {
  background: var(--kart); color: var(--metin);
  border: 1px solid var(--kenar);
}
.dugme-ikincil:hover { border-color: var(--kenar-koyu); transform: translateY(-1px); }

/* ── Bolum ritmi ────────────────────────────────────────
   Referansta bolum araligi 56 → 100px arasi degisiyor; tek deger
   yerine akici olcek kullanildi ki dar ekranda sikismasin. */
.bolum { padding-block: clamp(3.5rem, 2.2rem + 5vw, 6.25rem); }
.bolum-tepe { max-width: 52rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

/* Bolum ustundeki kucuk etiket - referansta her bolumde var */
.bolum-etiket {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .85rem; border-radius: var(--kose-tam);
  background: var(--mor-50); color: var(--ana-koyu);
  border: 1px solid var(--mor-100);
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  text-transform: none; margin-bottom: .9rem;
}
:root[data-tema="koyu"] .bolum-etiket {
  background: color-mix(in srgb, var(--ana) 16%, transparent);
  border-color: color-mix(in srgb, var(--ana) 28%, transparent);
  color: var(--mor-300);
}

/* ── Kartlar ────────────────────────────────────────────── */
.kart, .ozellik, .bilgi-kutu, .fiyat-kart, .sss-oge, .yazi-kart {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kart:hover, .ozellik:hover, .yazi-kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-2);
  border-color: var(--kenar-koyu);
}

/* ── Kahraman ───────────────────────────────────────────── */
.kahraman {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, var(--ana) 12%, transparent), transparent 70%),
    var(--zemin-2);
}
/* Referansta kahramanin arkasinda ince nokta dokusu var */
.kahraman::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--metin) 8%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60% 55% at 50% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 20%, #000 0%, transparent 75%);
  opacity: .55;
}
.kahraman > * { position: relative; z-index: 1; }

/* ── Ust baslik ─────────────────────────────────────────── */
.tepe {
  background: color-mix(in srgb, var(--zemin-2) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--gecis), background var(--gecis);
}
.tepe.kaydi { border-bottom-color: var(--kenar); background: color-mix(in srgb, var(--zemin-2) 94%, transparent); }
.tepe-menu a { font-size: .93rem; font-weight: 450; }

/* ── Kaydirinca belirme ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .belir { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
  .belir.gorundu { opacity: 1; transform: none; }
}

/* ── Surum rozeti ve yenilikler sayfasi ─────────────────── */
.surum-rozet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem; border-radius: var(--kose-tam);
  background: var(--zemin-3); border: 1px solid var(--kenar);
  color: var(--metin-3); font-size: .74rem; font-variant-numeric: tabular-nums;
}
.surum-rozet:hover { color: var(--ana); border-color: var(--ana); }

.yenilik-listesi { list-style: none; padding: 0; margin: 0 auto; max-width: 46rem; display: grid; gap: 1.1rem; }
.yenilik-oge {
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); padding: 1.5rem 1.7rem;
}
.yenilik-tepe { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.yenilik-surum {
  font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.05rem;
  color: var(--ana); font-variant-numeric: tabular-nums;
}
.yenilik-tepe time { margin-left: auto; font-size: .8rem; color: var(--metin-3); }
.yenilik-oge h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 .8rem; }
.yenilik-maddeler { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.yenilik-maddeler li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .95rem; color: var(--metin-2); line-height: 1.5;
}
.madde-tip { width: 7px; height: 7px; border-radius: 50%; flex: none; translate: 0 -2px; }
.madde-yenilik { background: var(--aksan-yesil); }
.madde-duzeltme { background: var(--aksan-mercan); }
.madde-iyilestirme { background: var(--aksan-cam); }

.etiket {
  font-size: .72rem; font-weight: 500; padding: .15rem .6rem;
  border-radius: var(--kose-tam); white-space: nowrap;
}
.etiket-yenilik { background: color-mix(in srgb, #2f7a55 14%, transparent); color: #2f7a55; }
.etiket-duzeltme { background: color-mix(in srgb, #a33a3a 12%, transparent); color: #a33a3a; }
.etiket-iyilestirme { background: color-mix(in srgb, #0e7490 12%, transparent); color: #0e7490; }

/* Renkli zeminde ikincil dugme.
   Cagri bolumu koyu zemin kullaniyordu; ikincil dugme orada beyaz uzerine
   beyaz kaliyordu ve yazi HIC gorunmuyordu (canlida yakalandi).
   Bolum kendi zeminini tasidiginda dugme saydam + cerceveli olur.

   20 Agu 2026: renk artik SABIT BEYAZ degil. Panelden bolume ACIK bir zemin
   secilince (kapanis cagrisina #b3c5d5 secildi) beyaz yazi yine kayboldu -
   ayni hata, bu kez ters yonde. Bolumun kendi metin rengi varsa o kullanilir. */
.bolum-cagri .dugme-ikincil,
.desen-vurgu .dugme-ikincil,
.desen-koyu .dugme-ikincil {
  background: transparent;
  color: var(--bolum-metin, #fff);
  border-color: color-mix(in srgb, var(--bolum-metin, #fff) 50%, transparent);
}
.bolum-cagri .dugme-ikincil:hover,
.desen-vurgu .dugme-ikincil:hover,
.desen-koyu .dugme-ikincil:hover {
  background: color-mix(in srgb, var(--bolum-metin, #fff) 14%, transparent);
  border-color: color-mix(in srgb, var(--bolum-metin, #fff) 80%, transparent);
}

:root[data-tema="koyu"] .bolum-cagri .dugme-ikincil,
:root[data-tema="koyu"] .desen-vurgu .dugme-ikincil,
:root[data-tema="koyu"] .desen-koyu .dugme-ikincil {
  color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
  border-color: color-mix(in srgb, var(--bolum-metin-koyu, #fff) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .bolum-cagri .dugme-ikincil,
  :root:not([data-tema="acik"]) .desen-vurgu .dugme-ikincil,
  :root:not([data-tema="acik"]) .desen-koyu .dugme-ikincil {
    color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
    border-color: color-mix(in srgb, var(--bolum-metin-koyu, #fff) 50%, transparent);
  }
}

/* Ust baslik sag grubu.
   Masaustunde ortadaki menu sag grubu saga itiyordu; mobilde menu
   gizlenince itecek bir sey kalmiyor ve logo/tema/menu dugmesi sola
   yigiliyordu (Musa 14.08 bildirdi). margin-left:auto ikisinde de calisir. */
.tepe-sag { margin-left: auto; }