/* ============================================================================
   GENEL SAYFALAR — hukuk, hakkinda, blog.
   Landing ile AYNI tema. Etsy ticari erisim incelemesinde uygulamanin ana
   sayfasi da degerlendiriliyor; ayri gorunen bir alt sayfa "sonradan
   yapistirilmis" izlenimi verir.

   Bu dosya tek kaynak: hukuk sayfalari, hakkinda ve blog ayni cubugu,
   ayni menuyu, ayni footer'i buradan aliyor. Once ayri bir hukuk.css
   vardi; ust cubuk degisince yalniz o degisti ve iki sayfa turu farkli
   gorunmeye basladi.
   ============================================================================ */

/* ============================================================================
   [hidden] — GENEL KURAL, uc kez ayni hataya dustukten sonra
   ============================================================================
   `hidden` ozniteligi tarayicinin KENDI stil sayfasindan geliyor ve
   ozgullugu en dusuk seviyede. `.bir-sinif { display: grid }` gibi
   siradan bir kural onu EZIYOR — yani `el.hidden = true` yazmak ogeyi
   gizlemiyor.

   ⚠ VE HICBIR SEY HATA VERMIYOR. `el.hidden` okuyan bir test de gecer:
   oznitelik dogru, CIZILEN sey yanlis. Bir kez zil rozetinde, bir kez
   bildirim panelinde, bir kez komut paletinde dustuk — ucunde de tek tek
   `.sinif[hidden]` yamasi yazildi. Kural artik burada, bir kez.

   `!important` bilerek: bu kuralin isi zaten ezilmemek.
   ============================================================================ */
[hidden] { display: none !important; }

:root{
  --accent:#0FA3D4; --accent-deep:#04698F; --accent-soft:#7FDCF5;
  /* ⚠ ADLAR YANILTICI AMA KASITLI: `--white` "sayfa zemini",
     `--cream` "kart/kutu yuzeyi" demek — ikisi de temaya gore degisiyor.
     Adlari duzeltmek uc sayfa turunde 200'u askin kullanima dokunmak
     olurdu; anlamlari burada yaziyor.

     ACIK TEMA ARTIK SAF BEYAZ DEGIL. Onceden alt sayfalar #FFFFFF,
     landing ise buz zemin kullaniyordu: ayni sitede iki ayri acik tema
     vardi ve gecis her seferinde goze carpiyordu. */
  /* ⚠ TUVAL, KAGIT DEGIL. Olculdu: bu zeminde murekkep 7.01:1 (AAA)
     ama %60 soluk yazi 3.20:1 ile AA'yi GECEMIYOR. Uzun metin ve soluk
     etiketler beyaz sayfanin (--cream) uzerinde durmak ZORUNDA. */
  /* ⚠ #2EAFDD denendi ve geri alindi — bkz. tema.css. */
  --white:#E9F2F8;          /* sayfa zemini — buz */
  --cream:#FFFFFF;          /* sayfa / kart yuzeyi — metin BURADA durur */
  --ink:#071A24;
  /* Soluk yazi tuvalde degil kagitta kullanildigi icin beyaza gore
     ayarli: #FFFFFF uzerinde 5.02:1. */
  --muted:rgba(7,26,36,.62); --line:rgba(7,26,36,.11);
  --maxw:760px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* ⚠ #061118 idi — neredeyse siyah ve "cok koyu" geliyordu.
       Buz temasinin gecesi murekkep MAVISI. */
    --white:#0A1E2A;        /* sayfa zemini — murekkep mavisi */
    --cream:#11303F;        /* kart yuzeyi */
    --ink:#EAF6FB;
    --accent-deep:#7FDCF5;
    --muted:rgba(234,246,251,.62); --line:rgba(234,246,251,.12);
  }
}
/* Acik SECIM sistem tercihini yenmeli — media sorgusu tek basina
   "acik" secen kullaniciyi koyu sistemde koyu temada birakirdi. */
:root[data-theme="dark"]{
  --white:#0A1E2A; --cream:#11303F; --ink:#EAF6FB;
  --accent-deep:#7FDCF5;
  --muted:rgba(234,246,251,.62); --line:rgba(234,246,251,.12);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a{color:var(--accent-deep)}
:focus-visible{outline:2.5px solid currentColor;outline-offset:3px;border-radius:5px}

/* ---------------------------------------------------------------- ust cubuk */
.nav{
  position:sticky; top:0; z-index:40; height:58px; display:flex; align-items:center;
  background:color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:24px;width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.1rem;
  letter-spacing:-.04em;color:var(--ink);text-decoration:none}
/* Marka isareti: buzdan kesilmis bir parca — ustten aydinlik, altta derin. */
.brand i{width:20px;height:20px;border-radius:6px;display:block;
  background:linear-gradient(150deg,#6FE0FA,#0A7CA8 62%,#05506F);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 3px 14px -4px rgba(26,190,234,.5)}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:.86rem;font-weight:500}
/* ⚠ Cubuk TUVALIN uzerinde. Soluk yazi orada 3.20:1 ile okunmuyordu;
   tam guclu murekkebin %78'i (5.1:1) ile hem okunur hem ikincil kaliyor. */
.nav-links > a{color:color-mix(in srgb, var(--ink) 78%, transparent);
  text-decoration:none;transition:color .2s}
.nav-links > a:hover{color:var(--ink)}
.nav-links > a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:22px}

/* ---------------------------------------------------------------- acilir menu */
.menu{position:relative}
/* ⚠ Cubuk TUVALIN uzerinde: `--muted` orada 3.36:1 ile AA'yi
   gecemiyordu. `.nav-links > a` ile ayni deger. */
.menu > button{background:none;border:0;padding:0;font:inherit;
  color:color-mix(in srgb, var(--ink) 78%, transparent);cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:color .2s}
.menu > button:hover,.menu[data-acik="1"] > button{color:var(--ink)}
.menu > button svg{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.menu[data-acik="1"] > button svg{transform:rotate(180deg)}
.menu-panel{
  position:absolute;top:calc(100% + 14px);right:0;min-width:250px;
  background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:8px;box-shadow:0 26px 50px -22px rgba(5,60,88,.45);
  display:grid;gap:2px;
  /* Kapali durum GORUNMEZ *ve* ODAKLANILAMAZ. Yalniz opacity kullanmak
     menuyu klavyeyle gezilebilir birakirdi: gorunmeyen baglantiya tab. */
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:100% 0;
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .22s}
.menu[data-acik="1"] .menu-panel{opacity:1;visibility:visible;transform:none}
.menu-panel a{display:grid;gap:2px;padding:9px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink);transition:background .15s}
.menu-panel a:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.menu-panel b{font-size:.88rem;font-weight:600;letter-spacing:-.01em}
.menu-panel span{font-size:.76rem;color:var(--muted);line-height:1.35}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* ---------------------------------------------------------------- dil secici */
.dil{display:flex;gap:2px;padding:3px;border-radius:100px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);font-size:.76rem;font-weight:600}
.dil button{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);
  padding:4px 10px;border-radius:100px;transition:background .2s,color .2s}
.dil button[aria-pressed="true"]{background:var(--cream);color:var(--ink);
  box-shadow:0 1px 3px rgba(5,60,88,.18)}
/* ⚠ DOLGU `--vurgu` DEGIL `--accent-deep`. Beyaz yazi #0FA3D4
   uzerinde 2.91:1 — AA'nin cok altinda ve bu bastan beri boyleydi.
   #04698F uzerinde 6.14:1. Acik renk cizgi/ikon icin kaliyor. */
.cta{background:var(--accent-deep);color:#fff!important;padding:8px 15px;border-radius:100px;
  font-size:.85rem;font-weight:600;text-decoration:none}
/* Gece temasinda `--accent-deep` ACIK bir ton (#7FDCF5) — uzerine
   beyaz degil MUREKKEP yazi gider. */
:root[data-theme="dark"] .cta,
html:not([data-theme="light"]) .cta{color:var(--white)!important}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .cta{color:#fff!important}
}

/* ---------------------------------------------------------------- metin */
/* Uzun metin dogrudan tuvalde duramaz (soluk yazi 3.20:1). Beyaz bir
   sayfa halinde tuvalin uzerine konuyor — hem okunur hem sayfanin
   kendisi bir nesne gibi duruyor. */
.wrap{max-width:var(--maxw);margin:clamp(24px,4vw,48px) auto clamp(48px,7vw,90px);
  padding:clamp(32px,5vw,60px) clamp(24px,4vw,48px);
  background:var(--cream);border-radius:26px;
  box-shadow:0 1px 2px rgba(5,60,88,.06), 0 24px 50px -34px rgba(5,60,88,.5)}
@media (max-width:640px){
  .wrap{margin-left:14px;margin-right:14px;border-radius:20px}
}
h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.06;margin:0 0 10px;text-wrap:balance}
h2{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:38px 0 10px;text-wrap:balance}
h3{font-size:1rem;font-weight:600;margin:22px 0 6px}
p,li{color:var(--muted);font-size:1rem}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:20px}
li{margin-bottom:6px}
strong{color:var(--ink);font-weight:600}
.tarih{font-size:.86rem;color:var(--muted);margin-bottom:32px}

/* Sozlesmenin BIREBIR gecmesini istedigi metinler. Kutu icinde ve
   gorulur — sayfanin dibine kucuk puntoyla gizlenmiyor. */
.feragat{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius:14px; padding:18px 20px; margin:26px 0;
}
.feragat p{margin:0;color:var(--ink);font-size:.92rem}
.feragat p + p{margin-top:10px}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-weight:600;font-size:.84rem}
td{color:var(--muted)}
.tablo-sarmal{overflow-x:auto}

footer{border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding:26px 24px 40px;text-align:center}
/* Zorunlu Etsy feragati burada duruyor ve sozlesme GORUNUR olmasini sart
   kosuyor. .8rem (12.8px) okunmayacak kadar kucuktu. */
/* Tuvalin uzerinde soluk yazi okunmuyor (3.20:1). Zorunlu Etsy
   feragati burada duruyor ve GORUNUR olmak zorunda. */
footer p{font-size:.85rem;margin:0 0 8px;line-height:1.6;
  color:color-mix(in srgb, var(--ink) 76%, transparent)}
footer p:first-child{margin-bottom:12px}
/* Tuvalde baglanti: `--accent-deep` 2.42:1 idi. Murekkep 7.01:1,
   ve alt cizgi baglanti oldugunu rengden bagimsiz soyluyor. */
footer a{margin:0 8px;display:inline-block;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}

/* ⚠ Parmakla kullanilan ekranlarda hedefler 44px. Bkz. landing.html. */
@media (pointer:coarse){
  /* `.dil a` DE VAR: uretilen Turkce sayfada dil secici dugme degil
     BAGLANTI (dil degistirmek orada adres degistirmek demek). */
  .nav-links > a,.menu > button,.dil button,.dil a,.cta,.brand,
  footer a{min-height:44px;display:inline-flex;align-items:center}
  .dil{padding:0}
  .dil button,.dil a{padding:0 14px}
  .menu-panel a{min-height:52px;align-content:center}
}
@media (max-width:760px){
  .nav-links > a{display:none}
  .nav-in{gap:14px}
  .nav-right{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}