/* Tolive demo - CSS degiskenleri 02-Tasarim/tasarim-tokenlari.json'dan uretildi. */
:root {
  --ana-700:#0A8A74; --ana-500:#0FB89A; --ana-300:#5FD3BE; --ana-100:#D6F4EE;
  --ik-700:#E05A38; --ik-500:#FF7A59; --ik-300:#FFB49E; --ik-100:#FFE7E0;
  /* Canli/insani sicak notr (soguk gri-yesil yerine bej/taupe) - marka --ana korunur, WCAG AA */
  --ink:#1A1512; --notr-700:#42403A; --notr-500:#5E564E; --notr-300:#D9CFC4; --notr-100:#F4EFE8; --beyaz:#FFFFFF;
  --basari:#16A34A; --uyari:#F59E0B; --hata:#EF4444; --bilgi:#0EA5E9; --link:#086A58;
  /* CTA/buton: marka --ana-500 header/vurguda kalir; buton koyu ton (WCAG AA). Tasarim #33 ile esli. */
  --cta:#097B66; --cta-metin:#FFFFFF; --vurgu-metin:#0E2A26;
  /* Sicak Guven paleti (Tasarim #34) - marka #0FB89A korunur; sicak zemin + guven/amber aksan */
  --sg-zemin:#FBF7F2; --sg-yuzey:#FFFDFB; --sg-kum:#F2EAE0;
  --sg-guven:#0E3A42; --sg-guven-100:#DDEAEC; --sg-guven-metin:#FFFFFF;
  --sg-amber:#F2A33C; --sg-amber-700:#C77F1E; --sg-amber-100:#FDEFD6; --sg-amber-metin:#0E2A26;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-tam:999px;
  --bos-xs:4px; --bos-sm:8px; --bos-md:16px; --bos-lg:24px; --bos-xl:40px;
  --g-kart:0 2px 8px rgba(14,42,38,0.08); --g-yuksek:0 8px 24px rgba(14,42,38,0.12);
  --aile-baslik:'Poppins','Segoe UI',Arial,sans-serif;
  --aile-metin:'Inter','Segoe UI',Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="light"]){
    --ink:#F2EBE4; --notr-700:#A99E92; --notr-500:#A99E92; --notr-300:#2E2822;
    --notr-100:#1C1814; --beyaz:#0C1A18; --ana-500:#2AD4B5; --ik-500:#FF8E70; --link:#35D6BA;
    --cta:#2AD4B5; --cta-metin:#0C1A18;
    --sg-zemin:#141210; --sg-yuzey:#1E1A16; --sg-kum:#241E18;
    --sg-guven:#8FD3DE; --sg-guven-100:#193A40; --sg-guven-metin:#0E2A26;
    --sg-amber:#F2A33C; --sg-amber-100:#3A2C16; --sg-amber-metin:#F2A33C;
  }
  /* K-01/K-02: koyu modda hero gradyani KOYU baslar (acik durakta metin okunmuyordu) */
  :root:not([data-tema="light"]) .hero{background:linear-gradient(140deg,#0F2E2A,var(--notr-100))}
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--aile-metin);font-size:16px;line-height:1.6;color:var(--ink);background:var(--sg-zemin)}
h1,h2,h3{font-family:var(--aile-baslik);margin:0 0 var(--bos-md);color:var(--sg-guven)}
h1{font-size:34px;line-height:1.2;font-weight:700}
h2{font-size:26px;line-height:1.25;font-weight:700}
h3{font-size:20px;line-height:1.3;font-weight:600}
a{color:var(--link);text-decoration:none}
::placeholder{color:var(--notr-500);opacity:1}
img,svg{max-width:100%}

/* ust bar */
.ust{background:var(--beyaz);border-bottom:1px solid var(--notr-300);position:sticky;top:0;z-index:10}
.ust .ic{max-width:1080px;margin:0 auto;padding:var(--bos-md);display:flex;align-items:center;gap:var(--bos-md)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--aile-baslik);font-weight:700;font-size:23px;color:var(--ink)}
.logo .marka-isaret{width:38px;height:38px;flex-shrink:0;display:block}
.logo .nokta{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--ana-500),var(--ana-700));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.ust nav{margin-left:auto;display:flex;gap:var(--bos-md);align-items:center}

.sar{max-width:1080px;margin:0 auto;padding:var(--bos-lg) var(--bos-md)}

/* butonlar */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-tam);border:0;font-family:var(--aile-metin);font-size:15px;font-weight:600;cursor:pointer;transition:.15s}
.btn-ana{background:var(--cta);color:var(--cta-metin)}
.btn-ana:hover{background:var(--ana-700)}
.tema-btn{background:transparent;border:1.5px solid var(--notr-300);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.tema-btn:hover{background:var(--notr-100)}
.tema-btn .ik{width:20px;height:20px}
.btn-ik{background:var(--ik-500);color:var(--vurgu-metin)}
.btn-ik:hover{background:var(--ik-700)}
.btn-cizgi{background:transparent;border:1.5px solid var(--notr-300);color:var(--ink)}

/* hero */
.hero{background:linear-gradient(140deg,var(--ana-100),var(--notr-100));border-radius:var(--r-lg);padding:var(--bos-xl);margin-bottom:var(--bos-lg)}
.hero h1{max-width:16ch}
.hero p{font-size:18px;color:var(--notr-700);max-width:48ch}
.guven-serit{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:18px;font-size:14px;color:var(--notr-700)}
.guven-serit b{color:var(--link);font-weight:700}
.ara-kutu{display:flex;flex-wrap:wrap;gap:var(--bos-sm);margin-top:var(--bos-lg);background:var(--beyaz);padding:var(--bos-sm);border-radius:var(--r-md);box-shadow:var(--g-kart)}
.ara-kutu select,.ara-kutu input{flex:1;min-width:140px;padding:12px;border:1px solid var(--notr-300);border-radius:var(--r-sm);font-size:15px;background:var(--beyaz);color:var(--ink)}

/* kategori chip */
.chipler{display:flex;flex-wrap:wrap;gap:var(--bos-sm);margin:var(--bos-md) 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-tam);background:var(--beyaz);border:1.5px solid var(--notr-300);cursor:pointer;font:inherit;font-size:14px;line-height:1;color:var(--ink)}
.chip.aktif{background:var(--cta);border-color:var(--cta);color:var(--cta-metin)}

/* kartlar */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--bos-md)}
.kart{background:var(--beyaz);border-radius:var(--r-md);box-shadow:var(--g-kart);overflow:hidden;transition:.15s;border:1px solid transparent;position:relative}
.favori-btn{position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--notr-500);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,background .12s}
.favori-btn:hover{background:var(--notr-100);color:var(--ik-700)}
.favori-btn.dolu{color:var(--ik-500)}
.favori-btn .ik{width:22px;height:22px}
/* gelismis filtre bari */
.filtre-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filtre-bar .f-sel select{padding:8px 12px;border:1.5px solid var(--notr-300);border-radius:var(--r-tam);background:var(--beyaz);color:var(--ink);font:inherit;font-size:14px;min-height:40px;cursor:pointer}
#f-favori.aktif{background:var(--ik-100);border-color:var(--ik-500);color:var(--ik-700)}
#f-favori.aktif .ik{color:var(--ik-500)}
.kart:hover{box-shadow:var(--g-yuksek);border-color:var(--ana-300)}
.kart a{color:inherit;display:block;padding:var(--bos-md)}
.kart-ust{display:flex;align-items:center;gap:var(--bos-sm);margin-bottom:var(--bos-sm)}
.avatar{width:48px;height:48px;border-radius:var(--r-tam);background:var(--ana-100);color:var(--ana-700);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:0 0 auto}
.kart h3{margin:0;font-size:17px}
.meta{font-size:13px;color:var(--notr-500)}
.rozet{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-tam)}
.rozet-ok{background:var(--sg-guven-100);color:var(--sg-guven)}
.rozet-uyari{background:var(--ik-100);color:var(--ik-700)}
.rozet-ana{background:var(--ana-100);color:var(--ana-700)}

/* coklu kategori secim bileseni (Tasarim #48) */
.cok-secim{border:0;margin:0;padding:0}
.cok-secim legend{font-size:13px;font-weight:600;color:var(--notr-700);margin-bottom:8px;padding:0}
.izgara-secim{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.secim-chip{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;background:var(--sg-yuzey);border:2px solid var(--notr-300);border-radius:var(--r-md);color:var(--ink);font-size:14px;transition:border-color .12s,background .12s}
.secim-chip input{position:absolute;opacity:0;width:1px;height:1px}
.secim-chip .ik{width:20px;height:20px;color:var(--ana-700);flex:0 0 auto}
.secim-chip span{flex:1}
.secim-chip .tik{width:18px;height:18px;color:var(--ana-500);opacity:0;flex:0 0 auto}
.secim-chip:hover{border-color:var(--ana-300)}
/* secili gorunum - JS '.secili' sinifi ASIL (her ortamda); :has ilerletme (progressive enhancement) */
.secim-chip.secili,.secim-chip:has(input:checked){border-color:var(--ana-500);background:var(--ana-100);color:#0E2A26}
.secim-chip.secili .ik,.secim-chip:has(input:checked) .ik{color:var(--ana-700)}
.secim-chip.secili .tik,.secim-chip:has(input:checked) .tik{opacity:1;color:var(--ana-700)}
.secim-chip:has(input:focus-visible){outline:3px solid var(--ana-300);outline-offset:2px}
.secim-chip:focus-within{outline:3px solid var(--ana-300);outline-offset:2px}
@supports not (selector(:has(*))){.secim-chip input{position:static;opacity:1;width:auto;height:auto}.secim-chip .tik{display:none}}
.yildiz{color:var(--ink);font-weight:600}
.yildiz .ik{color:var(--sg-amber-700,var(--sg-amber))}
.satir-rozet{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--bos-sm)}

/* kategori karti - ikonlu madalyon (Tasarim 04-Kod) */
.kart-kategori{display:flex;gap:14px;align-items:flex-start}
.kat-ikon{width:56px;height:56px;border-radius:16px;background:var(--ana-100);color:var(--ana-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.kat-ikon svg{width:32px;height:32px;stroke-width:2.1}
.kart-kategori h3{margin:0 0 2px;font-size:17px}

/* form */
.form-alan{margin-bottom:var(--bos-md)}
.form-alan label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.form-alan input,.form-alan select,.form-alan textarea{width:100%;padding:12px;border:1px solid var(--notr-300);border-radius:var(--r-sm);font-size:15px;font-family:var(--aile-metin);background:var(--beyaz);color:var(--ink)}
.zorunlu{color:#B3261E}
:root:not([data-tema="light"]) .zorunlu{color:#FF8E70}
.alan-hata{color:#B3261E;font-size:13px;margin-top:5px;font-weight:500}
:root:not([data-tema="light"]) .alan-hata{color:#FF8E70}
.alan-hata:empty{display:none}
.form-alan [aria-invalid="true"]{border-color:#B3261E;border-width:1.5px}
.kart-kutu{background:var(--beyaz);border-radius:var(--r-md);box-shadow:var(--g-kart);padding:var(--bos-lg)}
.ipucu{font-size:13px;color:var(--notr-500);margin-top:4px}
.uyari-kutu{background:var(--ik-100);border:1px solid var(--ik-300);color:var(--ik-700);padding:var(--bos-md);border-radius:var(--r-sm);font-size:14px}
.bilgi-kutu{background:var(--ana-100);border:1px solid var(--ana-300);color:var(--ana-700);padding:var(--bos-md);border-radius:var(--r-sm);font-size:14px}
.rumuz{font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--notr-500);font-weight:600}
.alt-not{text-align:center;color:var(--notr-500);font-size:13px;padding:var(--bos-xl) var(--bos-md)}
.geri{font-size:14px;color:var(--notr-500);display:inline-block;margin-bottom:var(--bos-md)}

/* ikon (Tasarim sprite, stroke=currentColor) */
.ik{width:1.1em;height:1.1em;vertical-align:-0.17em;display:inline-block}
.avatar-ik .ik{width:24px;height:24px;vertical-align:middle}
.chip .ik{width:16px;height:16px;vertical-align:-0.15em}
.rozet .ik{width:14px;height:14px}
.yildiz .ik{width:14px;height:14px;vertical-align:-0.1em}

/* durum ekranlari (bos/hata) */
.durum{display:flex;gap:var(--bos-md);align-items:center;background:var(--beyaz);border-radius:var(--r-md);box-shadow:var(--g-kart);padding:var(--bos-lg);color:var(--notr-700)}
.durum .ik{width:40px;height:40px;flex:0 0 auto;color:var(--ana-500)}
.durum-hata .ik{color:var(--hata)}
.durum .btn{margin-top:8px}

/* iskelet (skeleton) yukleniyor */
.iskelet{background:linear-gradient(90deg,var(--notr-100) 25%,var(--notr-300) 37%,var(--notr-100) 63%);background-size:400% 100%;animation:parilti 1.3s ease infinite;border-radius:var(--r-sm)}
.iskelet-kart{padding:var(--bos-md);pointer-events:none}
.iskelet-kart .avatar.iskelet{width:48px;height:48px;border-radius:var(--r-tam)}
.cizgi{height:12px;margin:6px 0}
@keyframes parilti{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){
  .iskelet{animation:none}
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ---- a11y: gorunur odak (focus-visible), klavye navigasyonu ---- */
a:focus-visible,button:focus-visible,.chip:focus-visible,[role="tab"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--link);outline-offset:2px;border-radius:var(--r-sm)}
/* fare/dokunmada outline gizli ama klavyede net (focus-visible destegi) */
:focus:not(:focus-visible){outline:none}

/* ekran-okuyucu-only (gorsel gizli, SR okur) */
.sr-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* icerige atla baglantisi (skip link) - sadece odaklaninca gorunur */
.atla{position:absolute;left:8px;top:-48px;z-index:100;background:var(--cta);color:var(--cta-metin);
  padding:10px 16px;border-radius:var(--r-sm);font-weight:700;transition:top .15s}
.atla:focus{top:8px}

/* dokunma hedefi >=44px (WCAG 2.5.5 / mobil) */
.chip{min-height:40px}
.ust nav a,.ust nav .btn{min-height:44px;display:inline-flex;align-items:center}

/* ---- responsive kirilimlar (375 / 768 / 1024) ---- */
@media (max-width:768px){
  h1{font-size:28px}
  h2{font-size:22px}
  .hero{padding:var(--bos-lg)}
  .ust nav{gap:var(--bos-sm)}
}
@media (max-width:480px){
  .hero h1{font-size:25px}
  .hero p{font-size:16px}
  .ara-kutu{flex-direction:column}
  .ara-kutu select,.ara-kutu input,.ara-kutu .btn{width:100%;min-width:0}
  .izgara{grid-template-columns:1fr}
  /* ust bar: dar ekranda derli toplu, "Hizmet Ara" iki satira kirilmasin */
  .ust .ic{gap:8px;padding:12px}
  .logo{font-size:18px;gap:7px}
  .logo .marka-isaret{width:32px;height:32px}
  .ust nav{gap:9px}
  .ust nav a:not(.btn){font-size:14px;white-space:nowrap;flex-shrink:0}
  .ust nav .btn-ana{padding:9px 13px;font-size:14px;white-space:nowrap;flex-shrink:0}
  .tema-btn{width:37px;height:37px}
  /* secim chip'leri dar ekranda 2 sutun */
  .izgara-secim{grid-template-columns:1fr 1fr}
}