/* İşler Burada -- sade, hizli, mobil-oncelikli.
   Harici font/CDN YOK: Lighthouse skoru ve $6 sunucuda bant genisligi icin. */
:root{
  --ana:#1565c0; --ana-koyu:#0d47a1; --yesil:#2e7d32;
  --metin:#1a1a1a; --soluk:#5f6368; --cizgi:#e0e0e0; --zemin:#f7f8fa;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--metin);background:#fff;line-height:1.6;-webkit-text-size-adjust:100%;
}
.kap{max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--ana);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.75rem;line-height:1.3;margin:.6em 0 .4em}
h2{font-size:1.25rem;margin:1.6em 0 .6em}
h3{font-size:1.02rem;line-height:1.4}
section{margin-bottom:2rem}

/* Ust */
.ust{border-bottom:1px solid var(--cizgi);background:#fff;position:sticky;top:0;z-index:10}
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{font-weight:700;font-size:1.2rem;color:var(--metin)}
.logo span{color:var(--ana)}
.ust-nav{display:flex;align-items:center;gap:14px;font-size:.92rem;position:relative}
.ust-nav > a{color:var(--metin);font-weight:500}
.ust-nav > a:hover{color:var(--ana)}
.ust-aktif{color:var(--ana)!important}

/* Kategoriler acilir menusu (uygulama parite, 18 Tem) */
.kategori-menu{position:relative}
.kategori-menu summary{cursor:pointer;list-style:none;font-weight:600;
  color:var(--metin);padding:8px 4px;user-select:none}
.kategori-menu summary::-webkit-details-marker{display:none}
.kategori-menu[open] summary{color:var(--ana)}
.kategori-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  background:#fff;border:1px solid var(--cizgi);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:300px;
  max-width:92vw;display:flex;flex-direction:column;gap:2px
}
.kategori-oge{display:flex;align-items:center;gap:12px;padding:9px 10px;
  border-radius:8px;color:var(--metin)}
.kategori-oge:hover{background:var(--zemin);text-decoration:none}
.kategori-oge strong{display:block;font-size:.92rem}
.kategori-oge small{display:block;color:var(--soluk);font-size:.78rem;
  line-height:1.3;margin-top:1px}
.kategori-ikon{font-size:1.3rem;flex-shrink:0;width:28px;text-align:center}
.kategori-check{color:var(--ana);font-weight:700;flex-shrink:0}
.kategori-aktif{background:#e8eaf6}
.kategori-aktif strong{color:var(--ana)}
/* Menu disina tiklayinca kapanma native <details> ile YOK -- basit bir
   dokunusla (baska bir yere tiklama) JS gerektirir; JS'siz yaklasimda
   "tekrar summary'e tikla" ile kapatma yeterli kabul edildi. */

/* Kahraman */
.kahraman{padding:28px 0 8px}
.giris{color:var(--soluk);max-width:62ch;margin-bottom:1rem}

/* Kategori sekmeleri (anasayfa, 18 Tem: eski arama formu + kategori kart
   izgarasi yerine -- Programlar haric 5 segment TEK SATIRDA sekme olarak
   gosterilir; secilen sekmenin filtre+sonuc govdesi HEMEN altina render
   edilir, bkz. index.html). */
/* ACILIR SEGMENT SECICI (25 Tem 2026) -- eski 5 kartlik izgaranin yerine.
   Kapali: tek satir (~46px). Mobilde eskiden ~400px kapliyordu. Gerekce ve
   kesfedilebilirlik dengesi icin index.html'deki nota bak. */
.segment-secici{margin-bottom:1.2rem}
.segment-secici>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:9px;padding:11px 13px;border:2px solid var(--ana);border-radius:12px;
  background:#e8f0fe;color:var(--metin);user-select:none}
.segment-secici>summary::-webkit-details-marker{display:none}
.segment-secici>summary::marker{content:""}
/* Ok isareti: acilinca doner (CSS transform -- ek isaret elemani gerekmez) */
.segment-secici>summary::after{content:"▾";font-size:.8rem;
  color:var(--ana);flex-shrink:0}
.segment-secici[open]>summary::after{content:"▴"}
.segment-secici>summary:hover{background:#dbe7fd}
.segment-secici>summary:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:2px}
/* Tek satirda kalmali: dar ekranda uzun ad ("Genel (Özel Sektör)") sarmak
   yerine kisalir -- sarsaydi kutu 46px'ten 75px'e cikiyordu (olculdu). */
.segment-secili-ad{font-weight:600;font-size:.95rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "5 kategori" -- burada baska secenekler oldugunun gorsel ipucu */
.segment-ipucu{font-size:.7rem;color:var(--soluk);white-space:nowrap}
.segment-ikon{font-size:1.15rem;flex-shrink:0;line-height:1}
.segment-sayi{flex-shrink:0;font-size:.72rem;font-weight:600;color:var(--ana);
  background:#fff;border-radius:6px;padding:3px 7px;white-space:nowrap}

.segment-liste{display:flex;flex-direction:column;gap:4px;margin-top:6px;
  padding:6px;border:1px solid var(--cizgi);border-radius:12px;background:#fff}
.segment-satir{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:9px;color:var(--metin);font-size:.9rem}
.segment-satir:hover{background:var(--zemin);text-decoration:none}
.segment-satir-ad{flex:1;min-width:0}
.segment-satir .segment-sayi{background:#e8f0fe}
.segment-satir-aktif{background:#e8f0fe;font-weight:600}
.segment-satir-aktif .segment-sayi{background:#fff}

/* ── MASAUSTU: SEGMENT SECICI ACILIR DEGIL ──────────────────────────────
   (25 Tem 2026, kullanici: "segment secicinin sag tarafi bombos, halbuki
   burayi bos birakacagimiza sakladigimiz diger segmentleri kucuk
   kutucuklarla o alana tasiyip gorunur hale getirebiliriz.")
   Aktif segment solda kart olarak durur, DIGER 4'U sagdaki bos alana cip
   olarak yayilir. Mobilde acilir davranis KORUNUR -- orada bos alan yok,
   kart dizisi ekranin yarisini kapliyordu. Bu kurallar temel kurallardan
   SONRA gelmeli (ok isaretini ezebilmek icin). */
.segment-secici{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* details KAPALI kalmis olsa bile (mobilde kapatilip pencere genisletilirse)
   liste masaustunde gorunur. Iki gizleme yontemi de ezilir: eski tarayici
   display:none, yeni Chrome ::details-content + content-visibility. */
.segment-secici>.segment-liste{display:flex!important;
  content-visibility:visible!important;flex-direction:row;flex-wrap:wrap;
  gap:6px;margin-top:0;padding:0;border:0;background:none;flex:1}
.segment-secici::details-content{content-visibility:visible!important;
  block-size:auto!important}
/* summary artik bir acilir-tetikleyici degil, sadece "aktif segment" karti */
.segment-secici>summary{pointer-events:none;cursor:default;flex:0 1 auto}
.segment-secici>summary::after{content:none}
.segment-secici>.segment-liste>.segment-satir-aktif{display:none}
.segment-secici>.segment-liste>.segment-satir{padding:6px 10px;font-size:.82rem;
  border:1px solid var(--cizgi);border-radius:999px;background:#fff}
.segment-secici>.segment-liste>.segment-satir:hover{border-color:var(--ana);
  background:#f5f8ff;text-decoration:none}
.segment-secici>.segment-liste>.segment-satir .segment-ikon{font-size:1rem}
.segment-secici>.segment-liste>.segment-satir .segment-sayi{font-size:.68rem;
  padding:2px 5px;background:#e8f0fe}
.segment-secici>.segment-liste>.segment-satir .segment-satir-ad{flex:0 1 auto}
/* "5 kategori" ipucu masaustunde ANLAMSIZ: kategorilerin hepsi zaten yan
   yana gorunuyor, saklanan bir sey yok. Sadece yer yiyordu. */
.segment-secici>summary>.segment-ipucu{display:none}

/* Etiketler */
.etiketler{display:flex;flex-wrap:wrap;gap:8px}
.etiket{
  border:1px solid var(--cizgi);border-radius:999px;padding:6px 13px;
  font-size:.88rem;background:#fff;color:var(--metin)
}
.etiket span{color:var(--soluk);font-size:.8rem}
.etiket:hover{border-color:var(--ana);text-decoration:none}
.etiket-aktif{background:var(--ana);border-color:var(--ana);color:#fff}
.etiket-aktif span{color:#dbe9fb}
.etiket-tum{font-weight:600;color:var(--ana)}

/* Kartlar */
.kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kart{
  display:block;border:1px solid var(--cizgi);border-radius:10px;padding:14px;
  background:#fff;color:var(--metin);transition:border-color .12s,box-shadow .12s
}
.kart:hover{border-color:var(--ana);box-shadow:0 2px 10px rgba(0,0,0,.07);text-decoration:none}
.kart h3{margin:.45em 0 .25em}
.kart .kurum{color:var(--soluk);font-size:.88rem}
.kart .tarih{color:var(--soluk);font-size:.8rem;margin-top:.4em}
.kart-gecti{opacity:.62}
.kart-ust{display:flex;gap:6px;flex-wrap:wrap}

/* Rozet */
.rozet{
  display:inline-block;background:#e8f0fe;color:var(--ana-koyu);border-radius:5px;
  padding:2px 8px;font-size:.75rem;font-weight:600
}
.rozet-yesil{background:#e6f4ea;color:var(--yesil)}
.rozet-gri{background:#f1f3f4;color:var(--soluk)}
.rozet-sari{background:#fff3cd;color:#8a6300;margin-left:8px;vertical-align:middle}

/* PII maskesi "(uygulamada)" -- serbest metne gomulu linke donusen kisim
   (bkz. main.py pii_link, 27 Tem 2026). Duz metin gibi durup "bozuk"
   izlenimi veriyordu -- rozet diliyle stilize edilip bilincli bir CTA
   gibi okunmasi saglandi. */
.pii-link{
  display:inline-flex;align-items:center;gap:3px;
  background:#e8f0fe;color:var(--ana-koyu);border-radius:5px;
  padding:1px 7px;font-size:.85em;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
.pii-link:hover{background:#d3e3fd;text-decoration:none}

/* İŞKUR ilan karti ozellik rozetleri (18 Tem, uygulama parite -- Flutter
   Colors.<renk> karsiligi, ayni sira/renk main.py ilan_rozetleri()'nde) */
.kart-baslik-satir{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kart-baslik-satir h3{margin:0 0 .25em;flex:1}
.rozet-acil{flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  background:#ffebee;color:#c62828;border:1px solid #ef9a9a;border-radius:8px;
  padding:2px 7px;font-size:.7rem;font-weight:700;white-space:nowrap}
.roz-satir{display:flex;flex-wrap:wrap;gap:5px;margin:.5em 0}
.r-blue{background:#e3f2fd;color:#1565c0}
.r-teal{background:#e0f2f1;color:#00695c}
.r-purple{background:#f3e5f5;color:#7b1fa2}
.r-orange{background:#fff3e0;color:#ef6c00}
.r-indigo{background:#e8eaf6;color:#303f9f}
.r-green{background:#e8f5e9;color:#2e7d32}
.r-cyan{background:#e0f7fa;color:#00838f}
.r-brown{background:#efebe9;color:#5d4037}
.r-pink{background:#fce4ec;color:#ad1457}
.r-deeppurple{background:#ede7f6;color:#4527a0}
.r-bluegrey{background:#eceff1;color:#37474f}
.r-lightgreen{background:#f1f8e9;color:#558b2f}
.r-amber{background:#fff8e1;color:#ff8f00}
.r-deeporange{background:#fbe9e7;color:#d84315}

/* Detay */
.iz{font-size:.82rem;color:var(--soluk);padding-top:14px}
.ozet-satir{display:flex;gap:8px;flex-wrap:wrap;margin:.5rem 0 1.2rem}
.alt-ilan{border:1px solid var(--cizgi);border-radius:10px;padding:16px;margin-bottom:14px}
.alt-ilan h2{margin-top:0}
.alanlar{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 18px;font-size:.92rem}
.alanlar dt{color:var(--soluk);font-weight:600}
.uyari{background:#fff4e5;border:1px solid #ffd8a8;border-radius:8px;padding:11px;margin-top:14px}
.bilgi{background:#e8f0fe;border-radius:8px;padding:11px;margin-bottom:1rem;font-size:.92rem}
.kutu{background:var(--zemin);border:1px solid var(--cizgi);border-radius:10px;padding:18px;margin-top:2rem}
.kutu h2{margin-top:0}
.kutu-cta{background:#e8f0fe;border-color:var(--ana)}

/* Uygulama tanitim kutusu: logo + QR kod (19 Tem, kullanici talebi) */
/* Logo ve QR kutusu, metin blogunun (baslik+aciklama+buton) TAM yuksekligine
   yaslanir (19 Tem, kullanici talebi) -- 'stretch' zinciri: cta-uygulama ->
   cta-govde -> cta-logo (img'de width:auto birakildi, tarayici resmin dogal
   en-boy oranini koruyarak genisligi kendisi hesaplar -- kare logo/QR
   distorsiyona ugramadan hem yukseklik hem genislikte buyur).
   ONEMLI: max-height SART -- yoksa flex 'stretch', resmin cok buyuk olan
   DOGAL boyutunu (300px/410px) kutunun yuksekligi sanip satiri devasa
   sisiriyor (kisir dongu, denendi ve gorulduo). max-height bu dogal boyutu
   sinirlayip kisir donguyu kirar; stretch bunun ALTINDA kalan gercek
   satir yuksekligine kucultur. */
.cta-uygulama{display:flex;align-items:stretch;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-govde{display:flex;align-items:stretch;gap:16px;flex:1 1 320px}
.cta-logo{border-radius:16px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.12);
  width:auto;height:auto;max-height:220px;align-self:stretch}
.cta-metin{flex:1;min-width:0}
.cta-qr{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:10px;
  align-self:stretch;justify-content:center}
.cta-qr img{display:block;width:auto;height:auto;max-height:180px;flex:1 1 auto;min-height:0;max-width:100%}
.cta-qr span{font-size:.72rem;color:var(--soluk);text-align:center}

/* Dugme */
.dugme{
  display:inline-block;border:1px solid var(--ana);color:var(--ana);
  border-radius:8px;padding:9px 17px;font-weight:600;font-size:.92rem;margin-top:.6rem
}
.dugme:hover{background:#e8f0fe;text-decoration:none}
.dugme-birincil{background:var(--ana);color:#fff}
.dugme-birincil:hover{background:var(--ana-koyu);color:#fff}
.sayfalama{display:flex;gap:10px;margin-top:1.4rem}
.bos{color:var(--soluk);padding:2rem 0}

/* Filtre cubugu (segment sayfalari -- uygulamadaki filtre grubu) */
.filtre{background:var(--zemin);border:1px solid var(--cizgi);border-radius:12px;
  padding:12px;margin-bottom:1.2rem}
.filtre-satir{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.filtre select,.filtre input[type=search]{
  border:1px solid var(--cizgi);border-radius:8px;padding:8px 10px;font-size:.9rem;
  background:#fff;color:var(--metin);font-family:inherit}
.filtre input[type=search]{flex:1 1 240px;min-width:180px}
.filtre select{flex:0 1 auto;max-width:100%}
.cip-grup{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
/* Kamu-isci kontenjan seridi (uygulamadaki indigo bar ile ayni vurgu, 18 Tem) */
.kontenjan-seridi{background:#e8eaf6;border:1px solid #c5cae9;border-radius:10px;
  padding:8px 10px;margin-top:0;margin-bottom:10px}
.kontenjan-seridi .cip span{background:#fff}
.kontenjan-seridi .cip input:checked+span{background:#3949ab;border-color:#3949ab}
.cip-etiket{font-size:.82rem;color:var(--soluk);margin-right:2px}
.cip{cursor:pointer;user-select:none}
.cip input{position:absolute;opacity:0;width:0;height:0}
.cip span{display:inline-block;border:1px solid var(--cizgi);border-radius:999px;
  padding:5px 10px;font-size:.82rem;background:#fff;color:var(--metin);transition:.12s}
.cip input:checked+span{background:var(--ana);border-color:var(--ana);color:#fff}
.cip input:focus-visible+span{outline:2px solid var(--ana-koyu);outline-offset:2px}
/* Sezonluk Hariç: DISLAMA cipi -- secilince yesil (dahil etme degil, cikarma) */
.cip-haric input:checked+span{background:var(--yesil);border-color:var(--yesil)}
.filtre select[disabled]{opacity:.5;cursor:not-allowed}
.filtrele-btn{margin-top:10px}

/* MOBILDE KATLANABILIR FILTRE (25 Tem 2026). Masaustunde katlama YOK:
   summary gizlenir, <details open> oldugu icin govde acik kalir -- yani
   masaustu gorunumu hic degismez. Gerekce icin _segment_govde.html'e bak. */
.filtre-katla>summary{display:none}
/* Masaustunde govde HER ZAMAN gorunur -- details KAPALI kalmis olsa bile.
   Neden gerekli: kullanici dar pencerede acar (JS katlar, open=false), sonra
   pencereyi genisletir; summary CSS ile gizlendigi icin acacak kontrol kalmaz
   ve filtre ERISILEMEZ olurdu. JS'te matchMedia dinleyicisi de var ama tek
   basina birakilmadi (JS kapaliyken/ge'c yuklenirken calismaz).
   Iki gizleme yontemi birden ezilir: eski tarayicilar display:none, yeni
   Chrome ::details-content + content-visibility kullaniyor. */
.filtre-katla>.filtre-govde{display:block!important;content-visibility:visible!important}
.filtre-katla::details-content{content-visibility:visible!important;
  block-size:auto!important}
.filtre-katla-ozet{color:var(--soluk);font-size:.8rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ACILIR FILTRE GRUPLARI -- ehliyet + vardiya (25 Tem 2026, kullanici:
   "filtre alani cok yer kapliyor"). Kapaliyken ikisi YAN YANA tek satir;
   biri acilinca flex-basis:100% ile TAM SATIRA gecer, boylece cipler dar
   sutuna sikismaz. Detaylar icin _segment_govde.html'deki nota bak. */
.filtre-acilir-satir{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.acilir{flex:0 1 auto;border:1px solid var(--cizgi);border-radius:10px;
  background:#fff;min-width:0}
.acilir[open]{flex:1 1 100%}
.acilir>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:6px;padding:6px 10px;font-size:.82rem;user-select:none;border-radius:9px}
/* Varsayilan ucgen isaretci iki motorda da kaldirilir (kendi oku konur) */
.acilir>summary::-webkit-details-marker{display:none}
.acilir>summary::marker{content:""}
.acilir>summary::after{content:"▾";color:var(--soluk);font-size:.7rem;margin-left:2px}
.acilir[open]>summary::after{content:"▴"}
.acilir>summary:hover{background:var(--zemin)}
.acilir>summary:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:2px}
.acilir-ozet{color:var(--soluk);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:14ch}
/* Secim varsa kutu vurgulanir -- kapaliyken bile "burada filtre var" belli */
.acilir.dolu{border-color:var(--ana)}
.acilir.dolu .acilir-ad{font-weight:600;color:var(--ana-koyu)}
.acilir.dolu .acilir-ozet{color:var(--ana-koyu)}
.acilir-govde{margin:0;padding:2px 10px 9px}

/* ── MASAUSTU: "➕ Diğer" KATLANMAZ, cipleri bos alana yayilir ───────────
   (25 Tem 2026, kullanici: "filtre kutusunda 'daha fazla' ile bazi
   filtreleri gizliyoruz ama bunu gizlemenin bize faydasi olmuyor, sadece
   filtre gostermek yerine bol bol bos alan gosteriyoruz.")
   Nadir etiketler masaustunde DOGRUDAN gorunur; kutu/kenarlik kaybolur,
   cipler tek satira akar. Ehliyet (9 cip) ve vardiya (4 cip) acilir KALIR
   -- onlar acildiginda iki tam satir kapliyor, bos alana sigmiyor.
   Mobilde katlama korunur (asagidaki medya sorgusunda geri alinir). */
.acilir[data-acilir="ek"]{border:0;background:none;flex:1 1 auto}
.acilir[data-acilir="ek"]>summary{display:none}
.acilir[data-acilir="ek"]>.acilir-govde{display:flex!important;
  content-visibility:visible!important;padding:0}
.acilir[data-acilir="ek"]::details-content{content-visibility:visible!important;
  block-size:auto!important}
/* "N ilan listelendi" satiri (uygulama parite, 18 Tem) */
.sayac-satiri{color:var(--soluk);font-size:.86rem;margin:1rem 0 .6rem;font-weight:500}
#liste.yukleniyor{opacity:.55;transition:opacity .15s}
.daha-sar{text-align:center;margin:1.4rem 0}
.daha-btn{min-width:200px}

/* İş yeri olanaklari (AI ile cikarilmis etiketler -- İŞKUR'da YOK) */
.olanaklar{display:flex;flex-wrap:wrap;gap:6px;margin-top:.5em}
.olanaklar span{background:var(--zemin);border:1px solid var(--cizgi);
  border-radius:6px;padding:2px 8px;font-size:.76rem;color:var(--soluk)}
.olanaklar-buyuk span{font-size:.9rem;padding:6px 12px;color:var(--metin)}
.uzun-metin{white-space:pre-line;max-width:70ch}
/* Kamu "Genel Hususlar" gizli kutusu (uygulama parite, 18 Tem) -- native
   <details>, JS'siz acilir/kapanir, erisilebilir (klavye + ekran okuyucu) */
.genel-hususlar{background:#e3f2fd;border:1px solid #bbdefb;border-radius:8px;
  padding:2px 12px 4px;margin-bottom:1rem;max-width:70ch}
.genel-hususlar summary{cursor:pointer;padding:9px 0;font-size:.9rem;
  font-weight:600;color:#1565c0;list-style:none}
.genel-hususlar summary::-webkit-details-marker{display:none}
.genel-hususlar summary::before{content:"▸ ";display:inline-block;
  transition:transform .15s}
.genel-hususlar[open] summary::before{transform:rotate(90deg)}
.genel-hususlar .uzun-metin{font-size:.86rem;color:var(--soluk);
  border-top:1px solid #bbdefb;padding-top:.7em;margin-bottom:.7em}

/* Program blogu (TYP/IUP -- detay sayfasi yok, hepsi listede) */
.program{border:1px solid var(--cizgi);border-radius:10px;padding:16px;margin-bottom:14px}
.program h2{margin:.5em 0 .2em;font-size:1.08rem}
.program .kurum{color:var(--soluk);font-size:.9rem;margin-bottom:.7em}
.giris-kutu{background:#e8f0fe;border-radius:10px;padding:16px;margin-bottom:1.4rem}
.giris-kutu p{margin-bottom:.6em}
.giris-kutu p:last-child{margin-bottom:0}

/* Kadro tablosu (SBB pozisyon kirilimi) */
.kurum-satir{color:var(--soluk);font-size:1rem;margin-top:-.3em}
.tablo-kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}
.tablo{border-collapse:collapse;width:100%;font-size:.88rem;min-width:520px}
.tablo th,.tablo td{border:1px solid var(--cizgi);padding:8px 10px;text-align:left;
  vertical-align:top}
.tablo th{background:var(--zemin);font-weight:600;white-space:nowrap}
.tablo tr:nth-child(even) td{background:#fbfcfd}

/* Metin sayfalari (hakkimizda/gizlilik/kullanim-sartlari/iletisim) */
.metin{max-width:70ch;padding-bottom:1rem}
.metin h2{font-size:1.1rem;margin:1.8em 0 .5em}
.metin p,.metin li{margin-bottom:.7em}
.metin ul{padding-left:1.3em}
.kucuk-not{color:var(--soluk);font-size:.85rem}
.iletisim-kutu{background:var(--zemin);border:1px solid var(--cizgi);
  border-radius:8px;padding:14px;font-size:1.02rem}

/* Rehber uyari kutusu (her yazinin sonunda "resmi ilan esastir") */
.uyari-kutu{background:#fff4e5;border:1px solid #ffd8a8;border-radius:8px;
  padding:14px;margin-top:2rem;font-size:.9rem}
.uyari-kutu p{margin:0}

/* Alt */
.alt{border-top:1px solid var(--cizgi);margin-top:3rem;padding:24px 0;background:var(--zemin)}
.uygulama{margin-bottom:.8rem}
.alt-nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem;margin-bottom:.8rem}
.kucuk{font-size:.78rem;color:var(--soluk);max-width:75ch}

/* Uygulama tanitim sayfasi (/uygulama, 19 Tem: PDF gorunumu yerine
   uygulamaya yonlendiren sayfa -- "resmi ilan metnini uygulamada gor" CTA'lari
   buraya cikar). */
.uyg-hero{
  background:linear-gradient(135deg,#1565c0,#0d47a1);color:#fff;
  border-radius:16px;padding:32px;margin-top:1.5rem;
  display:flex;align-items:stretch;justify-content:space-between;gap:24px;flex-wrap:wrap
}
.uyg-hero-govde{display:flex;align-items:center;gap:24px;flex:1 1 320px}
.uyg-hero-logo{width:120px;height:120px;border-radius:24px;flex-shrink:0;
  box-shadow:0 4px 16px rgba(0,0,0,.25)}
.uyg-hero-metin{flex:1;min-width:0}
.uyg-hero-metin h1{color:#fff;margin-top:0}
.uyg-hero-metin p{color:#dbe9fb;max-width:56ch;margin-bottom:1.2rem}
.uyg-hero .dugme{margin-top:0}
/* QR kutusu: cta-qr ile AYNI teknik (bkz. yukarida "stretch zinciri" notu)
   -- satirin tam yuksekligine yaslanip icerigi dikeyde ortalar, boylece
   logo+metin bloguyla ayni sirada, hizali durur (19 Tem, kullanici bulgusu:
   eskiden buton+QR metin kutusunun icine gomulmustu, dagitik gorunuyordu). */
.uyg-qr-kutu{background:#fff;border-radius:10px;padding:10px;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch}
.uyg-qr-kutu img{display:block;max-height:150px;width:auto;height:auto}
.uyg-qr-kutu span{font-size:.7rem;color:var(--soluk);margin-top:4px;text-align:center}

.ozellik-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.ozellik-kart{background:#fff;border:1px solid var(--cizgi);border-radius:12px;padding:18px}
.ozellik-kart .ikon{font-size:1.8rem;display:block;margin-bottom:8px}
.ozellik-kart h3{margin-bottom:4px;margin-top:0}
.ozellik-kart p{color:var(--soluk);font-size:.9rem;margin:0}

.uyg-ekran{display:flex;justify-content:center;margin:1.5rem 0}
.uyg-ekran img{max-width:260px;width:100%;border-radius:18px;border:6px solid #1a1a1a;
  box-shadow:0 8px 30px rgba(0,0,0,.18)}

/* İçindeki .cta-uygulama (bkz. _uygulama_cta.html) zaten kendi kart
   çerçevesini/arka planını taşıyor -- burada ikinci bir kutu içine
   almıyoruz (iç içe kutu görüntüsü dağınık dururdu, 19 Tem kullanıcı
   bulgusu), sadece başlığı ortalayıp boşluk veriyoruz. */
.uyg-alt-cta{margin-top:2rem}
.uyg-alt-cta h2{text-align:center;margin-bottom:1rem}

@media(max-width:600px){
  h1{font-size:1.4rem}
  .ust nav{gap:12px;font-size:.85rem}
  .alanlar{grid-template-columns:1fr;gap:2px 0}
  .alanlar dd{margin-bottom:.6em}
  /* Segment secici mobilde tam genisligi kullanir (masaustunde 420px'le
     sinirli -- dar ekranda o sinir gereksiz bosluk birakirdi). "5 kategori"
     ipucu dar ekranda gizlenir: satiri ikiye kirdiriyordu, acilir oldugunu
     zaten ▾ oku soyluyor. */
  /* MOBILDE ACILIR DAVRANIS GERI GELIR (masaustu kurallari geri alinir):
     burada bos alan yok, 5 kartlik dizi ekranin yarisini kapliyordu. */
  .segment-secici{display:block;max-width:none}
  .segment-secici:not([open])>.segment-liste{display:none!important}
  .segment-secici>.segment-liste{flex-direction:column;gap:4px;margin-top:6px;
    padding:6px;border:1px solid var(--cizgi);border-radius:12px;background:#fff}
  .segment-secici>summary{pointer-events:auto;cursor:pointer}
  .segment-secici>summary::after{content:"▾"}
  .segment-secici[open]>summary::after{content:"▴"}
  .segment-secici>.segment-liste>.segment-satir-aktif{display:flex}
  .segment-secici>.segment-liste>.segment-satir{padding:9px 11px;font-size:.9rem;
    border:0;border-radius:9px;background:none}
  .segment-secici>.segment-liste>.segment-satir-aktif{background:#e8f0fe}
  .segment-secici>.segment-liste>.segment-satir .segment-satir-ad{flex:1}
  .segment-ipucu{display:none}
  /* KAHRAMAN BASLIGI MOBILDE GORSEL OLARAK GIZLENIR (25 Tem 2026, kullanici:
     "mobil uygulama yuzunde yer kisiti oldugu icin ekteki yazi da olmasin").
     display:none DEGIL, ekran-okuyucu-gizleme (sr-only) kalibi: h1 + giris
     DOM'da KALIR -> Google mobil-first indexing'de sayfanin H1'ini ve
     tanitim metnini gormeye devam eder, ekran okuyucu okur; sadece piksel
     kaplamaz. display:none olsaydi ikisi de kaybolurdu. Masaustunde
     gorunur haliyle duruyor. */
  .kahraman{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* Mobilde katlama GERCEKTEN calissin: yukaridaki masaustu kurali
     (govde her zaman gorunur) burada geri alinir -- yoksa kutu "kapali"
     gorunur ama icerik durmaya devam ederdi. */
  .filtre-katla:not([open])>.filtre-govde{display:none!important}

  /* "➕ Diğer" mobilde yine katlanabilir kutu olur (masaustu kurallari
     geri alinir) -- dar ekranda 7 nadir cip icin yer yok. */
  .acilir[data-acilir="ek"]{border:1px solid var(--cizgi);background:#fff;
    flex:0 1 auto}
  .acilir[data-acilir="ek"]>summary{display:flex}
  .acilir[data-acilir="ek"]:not([open])>.acilir-govde{display:none!important}
  .acilir[data-acilir="ek"]>.acilir-govde{padding:2px 10px 9px}

  /* Filtre katlama SADECE mobilde gorunur (masaustunde summary gizli kalir) */
  .filtre-katla>summary{display:flex;align-items:center;gap:8px;cursor:pointer;
    list-style:none;user-select:none;padding:2px}
  .filtre-katla>summary::-webkit-details-marker{display:none}
  .filtre-katla>summary::marker{content:""}
  .filtre-katla>summary::after{content:"▾";margin-left:auto;color:var(--ana);
    font-size:.8rem;flex-shrink:0}
  .filtre-katla[open]>summary::after{content:"▴"}
  .filtre-katla-ad{font-weight:600;font-size:.9rem;flex-shrink:0}
  /* Katlanmisken alttaki 12px'lik form dolgusu gereksiz bosluk birakiyordu */
  .filtre:has(.filtre-katla:not([open]))
    {padding-top:10px;padding-bottom:10px;margin-bottom:.8rem}
  .filtre-katla[open]>summary{margin-bottom:8px}
  .cta-uygulama{justify-content:center;text-align:center}
  /* NOT: bu dar ekranda logo+metin yan yana kalirsa metin cok dar bir
     sutuna sikisip her kelime ayri satira taser -- dikey istifle (logo
     ustte, metin altta), logo da stretch bosaltilip kucuk sabit boyuta
     dusurulur. */
  .cta-govde{flex-direction:column;align-items:center;justify-content:center}
  .cta-logo{align-self:center;max-height:120px}
  .cta-qr img{max-height:150px}
  .uyg-hero{flex-direction:column;text-align:center;padding:28px 20px}
  .uyg-hero-govde{flex-direction:column;align-items:center}
  .uyg-qr-kutu{align-self:center}
}