/* İş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 + marka yazımı (11 Eyl 2026, kullanıcı: "işler burada kalıbı çok sönük,
   ayırt ediciliği yok; belirgin yap, yanına uygulama ikonu koy"). Renkler
   UYGULAMA LOGOSUNDAN ölçüldü (Pillow): lacivert #001b52, sarı #f7ac02. Sarı
   YAZI beyaz zeminde okunmaz (kontrast ~2:1) -> "Burada"nın altına fosforlu
   kalem şeridi. Simge köşesi yuvarlak + gölge: telefondaki uygulama simgesi
   gibi durur, "bu bir uygulama" demenin en kısa yolu. Tek kaynak: _marka.html */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo-ikon{display:block;width:36px;height:36px;border-radius:9px;flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,27,82,.3)}
.marka{font-weight:800;color:#001b52;white-space:nowrap;letter-spacing:-.01em}
.marka b{font-weight:800;padding:0 .08em;
  background:linear-gradient(transparent 56%,#f7ac02 56%,#f7ac02 90%,transparent 90%)}
.marka-logo{font-size:1.35rem}
.marka-ikon{display:inline-block;width:1.15em;height:1.15em;border-radius:.28em;
  vertical-align:-.22em;margin-right:.3em;box-shadow:0 1px 2px rgba(0,27,82,.3)}
a:hover .marka{text-decoration:underline}
.cta-liste{margin:-.2em 0 1em 1.1em;padding:0;text-align:left}
.cta-liste li{margin-bottom:.3em}
/* KPSS bölüm sayfası: yeni yılların kilitli satırları (11 Eyl 2026) --
   logonun sarısının açık tonu, "burada bir şey var ama uygulamada" hissi */
.tablo tr.kilitli td{background:#fff8e1}
.tablo tr.kilitli td:first-child{font-weight:600;color:#001b52}
.tablo tr.kilitli a{font-weight:600}
.kilit-not{margin:.5em 0 1.4em;font-size:.92rem}
.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}
/* Üst menü "öne çıkanlar" (11 Eyl 2026, bkz. segmentler.UST_MENU_EK) --
   logonun hemen yanında, marka laciverti. margin-right:auto: space-between
   ortaya itmesin, logoya yaslansın. Sığmadığı genişlikte gizlenir, aynı
   bağlantılar Kategoriler panelinin altında görünür (.kategori-ek). */
.ust-ek{display:flex;align-items:center;gap:18px;margin:0 auto 0 12px;font-size:.92rem}
.ust-ek a{color:#001b52;font-weight:600;white-space:nowrap}
.ust-ek a:hover{color:var(--ana)}
.kategori-ek{display:none;flex-direction:column;gap:2px;border-top:1px solid var(--cizgi);
  margin-top:4px;padding-top:6px}
.kategori-ek-baslik{font-size:.72rem;font-weight:700;color:var(--soluk);
  text-transform:uppercase;letter-spacing:.04em;padding:2px 10px}
/* 1020 -> 1100 (28 Eyl 2026): "Premium İlanlar" 4. bağlantı oldu; ölçüldü,
   logo + 4 bağlantı + menü ~1045 px istiyor, 1024 px pencerede "Kategoriler"
   iki satıra kırılıyordu. */
@media(max-width:1100px){
  .ust-ek{display:none}
  .kategori-ek{display:flex}
}

/* 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)}
/* right:0 (11 Eyl 2026, ölçüldü): düğme üst çubuğun SAĞ ucunda; left:0 ile
   panel sağa açılıp 620-1020px'te ekrandan 20-35px taşıyordu (1280'de düğme
   ortaya yakın olduğu için görünmüyordu). Sağ kenara yaslı -> sola açılır.
   Dar ekran (<=600px) ayrıca ekrana sabitlenir (bkz. mobil blok). */
.kategori-panel{
  position:absolute;top:calc(100% + 6px);right: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 / Esc ile kapanma: static/kategori_menu.js
   (14 Eyl 2026, kullanici bulgusu -- ilk surumde "tekrar summary'e tikla"
   yeterli sayilmisti, kullanici bos alana tiklayip kapanmasini bekledi).
   JS yoksa eski davranis surer. */

/* 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)}

/* IL LINKLERI (15 Agu 2026) -- Googlebot <select>'i gonderemedigi icin il
   sayfalari hic ic link almiyordu (bkz. _kurumdisi_govde.html). Kapaliyken
   tek satir: 18 Tem'in "il listesi yarim sayfa kaplamasin" karari korunur,
   linkler yine de HTML'de her zaman duruyor. */
.il-linkleri{margin:.6rem 0 1.1rem}
.il-linkleri>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--cizgi);
  border-radius:999px;background:#fff;color:var(--ana);font-size:.88rem;
  font-weight:600;user-select:none}
.il-linkleri>summary::-webkit-details-marker{display:none}
.il-linkleri>summary::marker{content:""}
.il-linkleri>summary::after{content:"▾";font-size:.8rem;flex-shrink:0}
.il-linkleri[open]>summary::after{content:"▴"}
.il-linkleri>summary:hover{border-color:var(--ana)}
.il-linkleri>summary:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:2px}
.il-linkleri>nav{margin-top:.7rem}

/* 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}
/* Iki butonu YAN YANA tutar (program karti: "İŞKUR'da Basvur" + "Uygulamayi
   Indir", 25 Agu 2026). flex-wrap: dar ekranda alt alta gecerler, tasmazlar.
   .dugme'nin kendi margin-top'u satir icinde cift bosluk yapmasin diye
   sifirlanir; dikey bosluk artik satirin kendisinden gelir. */
.dugme-satir{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:.6rem}
.dugme-satir .dugme{margin-top:0}
/* BILDIRIM BARI (program karti, 25 Agu 2026): cerceveli tek satirlik serit --
   solda deger cumlesi, saginda ok + "Uygulamayi Indir". TAMAMI tek link.
   flex:1 metin kalan alani doldurur, eylem saga yaslanir.
   flex-wrap: dar ekranda eylem alta gecer, tasma olmaz. */
/* ZEMIN: sitenin MEVCUT CTA rengi (#e8f0fe + mavi kenar, bkz. .kutu-cta).
   Once var(--zemin) kullanilmisti ama kartin kendisi (.kutu) de ayni rengi
   kullaniyor -- bar kartin icinde GORUNMEZ oluyordu (kullanici bulgusu).
   Hover bir tik koyulasir. */
/* BILDIRIM BARI RENGI (31 Agu 2026, iki adimda bulundu).
   1) Once #e8f0fe idi -> SONUKTU: ayni renk .bilgi, .giris-kutu ve
      .kutu-cta'da da var, bar etrafindaki BILGI kutulariyla ayni goruunuyor,
      "eylem" olarak okunmuyordu.
   2) Dolgu marka mavisi denendi -> KULLANICI REDDETTI: "iki mavi alt alta
      iyi olmamis". Hakli -- bar HER ZAMAN mavi bir dugmenin hemen altinda
      duruyor: iskur_detay'da "Telefon, adres ... uygulamada goruntule",
      program_liste'de "İŞKUR'da Başvur". Iki dolgu mavi blok ust uste
      geliyordu.
   COZUM: mavi AILESINDEN cikildi. Sitede kalan uygun renk yesil --
   sari/turuncu UYARI anlaminda dolu (.uyari #fff4e5, .rozet-sari #fff3cd),
   mavi ise birincil eylem. Yesil ayrica "ucretsiz" vaadine denk dusuyor ve
   ustundeki mavi butondan net ayrisiyor. Beyaz metin/#2e7d32 kontrasti
   5.1:1 -> WCAG AA gecer. */
.bildirim-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  border:1px solid #1b5e20;border-radius:10px;padding:10px 14px;
  margin-top:.7rem;text-decoration:none;background:var(--yesil)
}
.bildirim-bar:hover{background:#1b5e20;text-decoration:none}
.bildirim-metin{flex:1 1 240px;font-size:.86rem;color:#fff;line-height:1.35}
/* Eylem beyaz PILL: dolgu zemin uzerinde tek basina beyaz yazi eylemi
   yeterince ayirmiyordu -- tiklanabilir oldugu buradan belli oluyor. */
.bildirim-eylem{background:#fff;color:#1b5e20;font-weight:700;
  font-size:.86rem;white-space:nowrap;border-radius:999px;padding:5px 12px}
.sayfalama{display:flex;gap:10px;margin-top:1.4rem}
.otomatik-durum{color:var(--soluk);font-size:.95rem;padding:.4rem 0}
.filtre-satiri th{padding:6px 4px;background:var(--zemin);font-weight:400}
.filtre-satiri input{width:100%;min-width:5.5em;font:inherit;font-size:.9rem;padding:.35rem .45rem;border:1px solid var(--cizgi);border-radius:6px;background:#fff;color:var(--metin)}
.filtre-satiri th:nth-child(2) input{min-width:11em}
.filtre-satiri input:focus{outline:2px solid #1B2F6E;outline-offset:0;border-color:#1B2F6E}
.kadro-penceresi{width:min(760px,calc(100% - 24px));max-height:88vh;margin:auto;padding:0;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);color:var(--metin);background:#fff;overflow:hidden}
.kadro-penceresi[open]{display:flex;flex-direction:column}
.kadro-penceresi::backdrop{background:rgba(15,22,50,.55)}
.kp-ust{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--cizgi);background:var(--zemin)}
.kp-sayfa{font-size:.9rem}
.kp-kapat{font:inherit;font-weight:600;border:1px solid var(--cizgi);background:#fff;border-radius:8px;padding:.35rem .8rem;cursor:pointer}
.kp-govde{overflow:auto;padding:4px 20px 20px;overscroll-behavior:contain}
.kp-mesaj{padding:24px 0;color:var(--soluk)}
html.kp-acik{overflow:hidden}
@media (max-width:600px){.kadro-penceresi{width:100%;max-width:100%;max-height:92vh;margin:auto 0 0;border-radius:14px 14px 0 0}.kp-govde{padding:4px 14px 18px}.kp-kapat{min-height:44px;padding:.5rem 1.1rem}.kp-sayfa{display:inline-flex;align-items:center;min-height:44px}}
.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}
/* OSYM arama/il formu (KPSS/EKPSS taban puanlari, duyuru il secimi, 404 bolum
   aramasi). 11 Eyl 2026'dan 15 Eyl'e kadar STILSIZDI: sinif sablonlarda vardi,
   burada hic kural yoktu -> tarayici varsayilani (kucuk kutu, gri select,
   hizasiz dugme; kullanici bulgusu). Segment filtresiyle ayni gorunum. */
.osym-il-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:12px;
  padding:12px;margin:1rem 0 1.2rem}
.osym-il-form label{font-weight:600;font-size:.92rem}
.osym-il-form input[type=search],.osym-il-form select{
  border:1px solid var(--cizgi);border-radius:8px;padding:8px 10px;font-size:.95rem;
  background:#fff;color:var(--metin);font-family:inherit;min-height:42px}
.osym-il-form input[type=search]{flex:1 1 240px;min-width:0}
.osym-il-form select{flex:0 1 auto;max-width:100%}
.osym-il-form input[type=search]:focus,.osym-il-form select:focus{
  outline:2px solid var(--ana);outline-offset:1px;border-color:var(--ana)}
.osym-il-form .dugme{margin-top:0;min-height:42px;font-family:inherit;cursor:pointer}
@media (max-width:600px){.osym-il-form label{flex-basis:100%}
  .osym-il-form select,.osym-il-form .dugme{flex:1 1 auto}}
/* 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}
/* FILTRELERIN ETKISI (13 Eyl 2026, uygulamadan tasindi -- bkz. filtre.js).
   Not sayac satirinin SAGINDA, ayni satirda. min-height: not belirince
   satir yuksekligi degismesin (CLS). Not yalniz kullanici filtreye
   dokunduktan sonra cizilir; ilk boyamada yok. */
#ilan-sayaci{display:flex;align-items:center;gap:8px;min-height:1.6rem}
#ilan-sayaci .sayac-metin{flex-shrink:0}
.etki-notu{margin-left:auto;min-width:0;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;
  background:none;border:0;padding:2px;cursor:pointer;font:inherit;border-radius:8px}
.etki-notu:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:1px}
.etki-hap{flex-shrink:0;white-space:nowrap;background:rgba(0,0,0,.06);border-radius:999px;
  padding:1px 8px;font-size:.78rem;font-weight:500;color:#616161}
.etki-hap b{color:#c62828;font-weight:700;font-variant-numeric:tabular-nums}
.etki-hap b.artti{color:#2e7d32}
.etki-hap b.etkisiz{color:#757575}
.etki-hap{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.etki-uyari{color:#b94a00;font-weight:600;font-size:.8rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.etki-notu .etki-uyari{min-width:0}
/* Pencere: mobilde alttan acilan sayfa, genis ekranda ortada kart. */
.etki-pencere{border:0;padding:0 20px 18px;width:100%;max-width:560px;max-height:85vh;
  margin:auto auto 0;border-radius:18px 18px 0 0;color:var(--metin);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);transition:transform .2s}
.etki-pencere::backdrop{background:rgba(0,0,0,.42)}
@media (min-width:601px){.etki-pencere{margin:auto;border-radius:16px}
  .etki-tutamac{visibility:hidden}}
.etki-tutamac{width:40px;height:4px;border-radius:2px;background:#c4c4c4;
  margin:10px auto 6px;box-shadow:0 0 0 14px transparent;touch-action:none}
.etki-kapat{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;
  background:none;border-radius:50%;color:#444;cursor:pointer;display:grid;place-items:center}
.etki-kapat:hover{background:rgba(0,0,0,.06)}
.etki-bulunamadi{text-align:center;color:#e68a00;padding:10px 24px 14px;
  border-bottom:1px solid var(--cizgi);margin-bottom:12px}
.etki-bulunamadi-baslik{color:var(--metin);font-size:1.2rem;font-weight:700;margin-top:4px}
.etki-davet{color:#555;font-size:.92rem;margin-top:2px}
.etki-baslik{font-size:1.08rem;margin:6px 44px 2px 0}
.etki-alt{color:#555;font-size:.85rem}
.etki-liste{list-style:none;margin:8px 0}
.etki-liste li{display:flex;justify-content:space-between;gap:12px;padding:8px 0}
.etki-ad{font-weight:600;font-size:.95rem}
.etki-once-sonra{color:#555;font-size:.82rem}
.etki-liste .etki-uyari{font-size:.82rem;white-space:normal}
.etki-liste li{align-items:center}
.etki-liste li>div{flex:1;min-width:0}
/* Kaldir dugmesi satirin ORTASINDA (kullanici talebi); sifirlayanda dolu yesil. */
.etki-kaldir{flex-shrink:0;white-space:nowrap;font:inherit;font-size:.8rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--yesil);background:#fff;
  border:1px solid #a5d6a7;border-radius:999px;padding:5px 11px;cursor:pointer}
.etki-kaldir:hover{background:#e8f5e9}
.etki-kaldir.oneri{background:var(--yesil);border-color:var(--yesil);color:#fff}
.etki-kaldir.oneri:hover{background:#1b5e20}
.etki-kaldir:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:2px}
/* +0: dugme degil pasif bilgi (15 Eyl 2026, bkz. filtre.js kazancYaz). */
.etki-getirmez{flex-shrink:0;white-space:nowrap;font-size:.8rem;font-weight:600;color:#757575;
  background:#f1f1f1;border-radius:999px;padding:5px 11px;cursor:help}
/* Kesin sayi gelene kadar: kucuk donen halka (metin "Kaldır"). */
.etki-kaldir.bekliyor::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:6px;
  vertical-align:-.05em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:etki-don .7s linear infinite}
@keyframes etki-don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.etki-kaldir.bekliyor::after{animation:none;opacity:.5}}
.etki-sayi{color:#c62828;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:3.4em;text-align:right}  /* sabit sutun: Kaldir dugmeleri alt alta hizali */
.etki-sayi.dramatik{color:#b94a00}
.etki-uygulama{display:flex;align-items:center;gap:12px;background:#e8f0fe;border-radius:12px;
  padding:12px 14px;margin:6px 0 10px;color:var(--ana)}
.etki-uygulama>svg{flex-shrink:0}
.etki-uygulama-metin{flex:1;min-width:0;color:var(--metin);font-size:.86rem;line-height:1.4}
.etki-uygulama-baslik{font-weight:700;font-size:.93rem;margin-bottom:2px}
.etki-uygulama-dugme{display:inline-block;margin-top:8px;padding:6px 14px;font-size:.85rem}
.etki-uygulama-qr{flex-shrink:0;border-radius:6px;background:#fff;padding:3px}
@media (max-width:600px){.etki-uygulama-qr{display:none}}
.etki-dipnot{color:#777;font-size:.74rem;line-height:1.45;margin-top:6px}
#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}
/* SBB "gerekli belgeler" madde listesi (3 Agu 2026). article icindeki ul'un
   girintisi yoktu (.metin ul yalniz rehber/statik sayfalarda tanimli) --
   madde isaretleri kenara tasip liste duz metin gibi akiyordu. */
.belgeler{padding-left:1.3em;max-width:70ch;font-size:.92rem}
.belgeler li{margin-bottom:.35em}
/* KPSS taban puanları bölüm listesi (11 Eyl 2026): ~2.000 bağlantı çok sütunda */
.bolum-liste{columns:3 15rem;column-gap:1.6rem;padding-left:1.1em;font-size:.92rem}
.bolum-liste li{break-inside:avoid;margin-bottom:.3em}
.bolum-liste small{color:var(--soluk)}
/* UYGULAMA TANITIM KUTUSU + ILAN VIDEOSU YAN YANA (4 Agu 2026, kullanici
   talebi). Ikisi de ayni isi yapiyor (uygulama tanitimi) -> tek satirda.
   Satirin yuksekligini VIDEO belirler (dikey 9:16); tanitim kutusu align-items
   :stretch ile o yuksekilige yaslanir, icerigini dikeyde ortalar.
   flex-wrap: dar ekranda video alta duser (bkz. 600px medya sorgusu). */
/* YUKSEKLIGI TANITIM KUTUSU BELIRLER, VIDEO ONA UYAR (4 Agu 2026).
   Once ikisine de sabit olcu verilip hizalanmaya calisildi ve iki kez ters
   tepti: kutunun gercek boyu (logo+QR yuklendiginde 510px) videonunkinden
   (348px) uzundu, sabit sayilarla kovalayinca fark 68 -> 162px'e cikti.
   Cozum: satir 'stretch', video cercevesi flex:1 ile kalan yuksekligi alir,
   GENISLIGINI aspect-ratio'dan tarayici hesaplar -- iki kart her zaman ayni
   boyda, elle ayar gerekmez.
   OLCUM TUZAGI: logo/QR loading=lazy oldugu icin gorunur alana girmeden
   yukseklikleri 0 olcusulur; bu ortamda kutu 280px sanilmisti. Olcerken
   once img.loading='eager' yapip yuklenmesini bekleyin. */
/* justify-content:center -- ikili blok (~700px) sayfa genisliginde (~1050px)
   sola yaslanip sagda genis bir bosluk birakiyordu (4 Agu, kullanici bulgusu). */
.cta-video-satir{display:flex;align-items:stretch;justify-content:center;
  gap:16px;flex-wrap:wrap;margin-top:1.5rem}
.cta-video-satir .cta-uygulama{margin:0}
/* OLCUYU VIDEO BELIRLER, KUTU UYAR (4 Agu 2026 -- yon degistirildi).
   Once tersi denendi (kutu belirler, video 'flex:1' ile uyar) ama buyutme
   istegi karsilanamadi: kutu genisletilince metin daha az satira iniyor,
   dogal yukseklik AYNI kaliyor, dolayisiyla video da buyumuyordu.
   Simdi video sabit genislikte; yuksekligini aspect-ratio verir, kutu
   'stretch' ile ona uzar. Buyutmek icin TEK sayi degistirmek yeter. */
.ilan-video-yan{flex:0 0 auto;margin:0;display:flex;flex-direction:column;gap:6px}
.ilan-video-yan .video-cerceve{flex:0 0 auto;width:340px;aspect-ratio:9/16;
  border-radius:10px;overflow:hidden;background:#000}
.ilan-video-yan iframe{width:100%;height:100%;border:0;display:block}
.ilan-video-yan figcaption{font-size:.72rem;color:var(--soluk);text-align:center}

/* KOMPAKT tanitim kutusu: yalniz videonun YANINDAYKEN -- DIKEY dizilim
   (4 Agu 2026, kullanici talebi: "tanitim kutusunu dikey formata cevir:
   yukarda logo, ortada indir butonu, en altta QR -- boylece ikisi de dikey
   olur ve guzel gozukur").
   Ilk deneme kutuyu YATAY birakip yalniz kucultmustu: video dikey oldugu icin
   satir yuksekligini o belirliyor, yatay kutu ustte toplanip altinda genis bir
   bosluk birakiyordu (kullanici ekran goruntusuyle gosterdi).
   Simdi ikisi de dikey ve dogal yukseklikleri neredeyse esit (~348px):
   logo 84 + baslik + aciklama + buton + QR 96.
   Videosuz sayfalarda bu sinif HIC eklenmez, kutu eski YATAY tam genisligiyle
   kalir. */
/* justify-content:space-between -- kutu videonun boyuna uzadiginda artan
   bosluk ustte toplanmasin: logo EN USTTE, QR EN ALTTA, buton ortada kalir
   (kullanicinin istedigi dikey duzen zaten buydu). */
.cta-kompakt{flex:0 0 auto;width:340px;padding:18px;
  flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;gap:14px}
.cta-kompakt .cta-govde{flex:0 0 auto;flex-direction:column;align-items:center;
  gap:10px;width:100%}
/* Logo/QR olculeri artik VIDEOYA gore ayarlanmiyor -- video kutunun boyuna
   uyuyor (bkz. .ilan-video-yan), yani buradaki her buyutme videoyu da
   buyutur. Kullanici talebi (4 Agu): "ikisi de biraz daha buyutulebilir". */
.cta-kompakt .cta-logo{max-height:128px;align-self:center}
.cta-kompakt .cta-metin h2{font-size:1.02rem;margin-bottom:.3em}
.cta-kompakt .cta-metin p{font-size:.88rem;margin-bottom:.8em}
.cta-kompakt .cta-qr{align-self:center;padding:9px;flex:0 0 auto}
.cta-kompakt .cta-qr img{max-height:136px}
/* Sayfa baglami (3 Agu 2026): kurumun gecmis alimlari + ildeki diger ilanlar.
   <article>'in DISINDA duruyor -> asil ilan icerigiyle karismasin, okuyucu
   "burasi ek baglam" ayrimini gorsel olarak da yapsin. */
.baglam{border-top:1px solid var(--cizgi);margin-top:2rem;padding-top:1.2rem}
.baglam h2{font-size:1.1rem;margin-bottom:.5em}
.baglam > p{font-size:.92rem;max-width:70ch}
.baglanti-liste{list-style:none;padding:0;margin:.8em 0}
.baglanti-liste li{padding:.5em 0;border-bottom:1px solid var(--cizgi);font-size:.92rem}
.baglanti-liste li:last-child{border-bottom:none}
.baglanti-liste .kucuk-not{display:block;margin-top:.15em}
/* 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}
  /* Logo dar ekranda küçülür (üst çubuk 60px, yanında 3 menü öğesi var).
     ÖLÇÜLDÜ (375px): büyüyen logo (142px) menüyü sıkıştırıp "📂 Kategoriler"i
     iki satıra kırdı -> menü öğeleri kırılmaz, 📂 dar ekranda gizlenir, logo
     ve menü yazısı ekran genişliğiyle orantılı küçülür (360px Android dahil). */
  .ust-ic{gap:8px}
  .logo{gap:6px}
  .logo-ikon{width:28px;height:28px;border-radius:7px}
  .marka-logo{font-size:clamp(.9rem,4.3vw,1.1rem)}
  /* .ust .ust-nav: yukarıdaki eski ".ust nav" kuralından (0,1,1) baskın olsun */
  .ust .ust-nav{gap:clamp(8px,2.6vw,12px);font-size:clamp(.76rem,3.5vw,.85rem)}
  .ust-nav > a,.kategori-menu summary{white-space:nowrap}
  .kat-ikon{display:none}
  /* Kategoriler paneli dar ekranda EKRANA sabitlenir (11 Eyl 2026, ölçüldü):
     masaüstündeki left:0 + min-width:300 düzeninde panel 375px'te 163-463px
     arasına düşüp sağdan ~90px taşıyor, sayfayı yatay kaydırıyordu (eski
     kusur). "Öne çıkanlar" dar ekranda YALNIZ bu panelde -> üst çubuğun
     hemen altında, iki kenardan 8px içeride; kısa ekranda kendi içinde kayar. */
  .kategori-panel{position:fixed;top:64px;left:8px;right:8px;min-width:0;
    max-width:none;max-height:calc(100vh - 72px);overflow-y:auto}
  .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}
  /* Dar ekranda video tanitim kutusunun ALTINA duser ve ortalanir -- yan yana
     kalsa ikisi de okunamayacak kadar daralirdi (4 Agu 2026). Kutu dikey
     dizilimini KORUR ama tam genisligi kullanir (300px sabiti kalksin). */
  .cta-video-satir{flex-direction:column;align-items:center}
  .cta-kompakt{width:100%}
  .ilan-video-yan .video-cerceve{width:240px}
  .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}
}

/* Kismi telefon yanindaki aciklama (22 Agu 2026): "— son 4 hane uygulamada".
   Numaranin eksik olmasi KASITLI oldugunu soyler; olmazsa ziyaretci veriyi
   bozuk sanar. */
.ipucu{font-size:.78rem;color:var(--soluk);white-space:nowrap}

/* TYP/IUP filtre cubugu (29 Agu 2026, kullanici talebi: "uygulamadaki filtre
   esnekligini siteye de koy"). Segment sayfalarindaki .filtre ile AYNI dil
   -- ayri bir gorunum icat etmiyoruz; fark yalnizca etiketli alanlar, cunku
   burada yalnizca iki alan var ve ne olduklari yazmazsa anlasilmiyor. */
.program-filtre{background:var(--zemin);border:1px solid var(--cizgi);
  border-radius:12px;padding:12px;margin-bottom:1.2rem;
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.program-filtre label{display:flex;flex-direction:column;gap:4px;flex:1 1 200px}
.program-filtre label span{font-size:.8rem;color:var(--soluk);font-weight:600}
.program-filtre select{border:1px solid var(--cizgi);border-radius:8px;
  padding:8px 10px;font-size:.9rem;background:#fff;color:var(--metin);
  font-family:inherit;width:100%}
.program-filtre .dugme{margin-top:0}
.program-filtre .filtre-not{font-size:.85rem;color:var(--soluk);flex:1 1 200px}
.filtre-temizle{font-size:.85rem;align-self:center}
.il-secici{border:1px solid var(--cizgi);border-radius:12px;margin-bottom:1rem;
  background:#fff}
.il-secici>summary{cursor:pointer;padding:10px 12px;font-size:.92rem;
  color:var(--ana);list-style-position:inside}
.il-secici>summary strong{color:var(--metin)}
.il-secici[open]>summary{border-bottom:1px solid var(--cizgi)}
.il-secici .etiketler{padding:12px}

/* ETIKET IPUCLARI (14 Eyl 2026) -- bkz. static/ipucu.js. SINIF ADI etiket-ipucu:
   sitede ayri bir .ipucu (nowrap, soluk yazi) zaten var -- ilk surum onunla
   cakisti, metin kutudan tasti. position:fixed:
   kart/filtre kutularinin overflow kirpmasindan etkilenmez, sayfada yer
   kaplamaz (CLS yok). */
.etiket-ipucu{position:fixed;z-index:1000;max-width:min(280px,calc(100vw - 16px));
  background:#1f2937;color:#fff;font-size:.8rem;line-height:1.4;font-weight:500;white-space:normal;
  padding:6px 10px;border-radius:8px;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.2)}
.etiket-ipucu::after{content:"";position:absolute;top:100%;left:var(--ok-x,50%);
  margin-left:-6px;border:6px solid transparent;border-top-color:#1f2937}
.etiket-ipucu.alt::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1f2937}
/* Tiklanamayan rozetlerde "aciklamasi var" isareti; ciplerde imlec zaten el. */
.rozet[data-ipucu],.rozet-acil[data-ipucu],.olanaklar [data-ipucu]{cursor:help}
/* Aylik kamu alimlari raporu (26 Eyl 2026) -- grafikler JS'siz saf CSS
   cubuk (genislik yuzdesi sunucuda hesaplanir); mobilde etiket ustte. */
.rapor-giris{font-size:1.05rem;margin-bottom:1.2rem}
.rapor h3{font-size:1.05rem;margin:1.4em 0 .5em}
.rapor-ozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:1rem 0 1.5rem}
.rapor-kutu{background:var(--zemin);border:1px solid var(--cizgi);border-radius:10px;padding:14px 16px}
.rapor-rakam{display:block;font-size:1.7rem;font-weight:700;color:var(--ana-koyu);line-height:1.2}
.rapor-etiket{display:block;color:var(--soluk);font-size:.88rem}
.rapor-degisim{display:block;margin-top:.3em;font-size:.85rem;font-weight:600}
.rapor-degisim small{font-weight:400;color:var(--soluk)}
.rapor-degisim.artis{color:var(--yesil)}
.rapor-degisim.azalis{color:#c62828}
.cubuk-liste{margin:.4rem 0 .6rem}
.cubuk-satir{display:grid;grid-template-columns:minmax(120px,240px) 1fr auto;gap:10px;align-items:center;padding:4px 0;font-size:.92rem}
.cubuk-iz{background:#eef1f5;border-radius:4px;height:14px;overflow:hidden}
.cubuk{display:block;height:100%;background:var(--ana);border-radius:4px}
.cubuk-deger{font-variant-numeric:tabular-nums;white-space:nowrap}
.cubuk-deger small{color:var(--soluk)}
.rapor-il-bulut{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.6rem}
.rapor-il-bulut small{color:var(--soluk)}
.rapor-alinti textarea{width:100%;font:inherit;font-size:.85rem;padding:8px;border:1px solid var(--cizgi);border-radius:6px;resize:vertical;background:#fff}
.rapor-yontem ul,.rapor-aylar{margin:.4rem 0 0 1.2em}
.rapor-yontem li,.rapor-aylar li{margin-bottom:.45em}
.rapor .tablo td:nth-child(n+3),.rapor .tablo th:nth-child(n+3){font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .cubuk-satir{grid-template-columns:1fr auto;row-gap:2px}
  .cubuk-ad{grid-column:1 / -1}
  .rapor-rakam{font-size:1.45rem}
}
.rapor-atif{font-size:.92rem;color:var(--soluk);background:var(--zemin);border-left:3px solid var(--ana);padding:8px 12px;border-radius:0 6px 6px 0;margin:.2rem 0 1rem}
/* Rapor tablolari 3-5 dar sutun: genel .tablo'nun min-width:520px'i (KPSS'in
   genis tablosu icin) mobilde siralama sutununu ekran disina itiyordu (ilce
   tablosu kisiye gore sirali ama yalniz ilan sayisi gorunuyordu). */
.rapor .tablo{min-width:0}
.rapor .tablo th,.rapor .tablo td{padding:7px 8px}
/* Ana sayfa one cikan ozgun icerik -- INCE SERIT (28 Eyl 2026; 27 Eyl'deki 4 buyuk
   kart mobilde ekranin yarisini kapliyordu). Tek satir, sigmazsa kelime kelime
   kayar; kart/cerceve yok, ilan listesinin onune gecmez. */
.one-cikan{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 10px;font-size:.86rem;line-height:1.5}
.one-cikan a{color:var(--ana-koyu);font-weight:600;white-space:nowrap}
.one-cikan a:hover{color:var(--ana)}
.oyun-cta{display:flex;gap:10px;align-items:flex-start;background:#fff8e1;border:1px solid #ffe08a;
  border-radius:10px;padding:10px 14px;margin:1rem 0;font-size:.93rem}

/* ── PREMIUM İLANLAR HARİTASI (28 Eyl 2026) ─────────────────────────────────
   Renk ölçeği lejantla aynı eşikler (premium_harita.js derece()). Amber tonları
   "premium" vurgusu; ilanı olmayan il gri ve tıklanamaz. */
.premium h1{margin-bottom:.4rem}
.premium-giris{color:var(--soluk);margin-bottom:.5rem}
.premium-kriter{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 .6rem}
.premium-kriter li{background:#fff8e1;border:1px solid #ffe08a;border-radius:999px;padding:3px 10px;font-size:.85rem}
.premium-zaman{font-size:.88rem;color:var(--soluk);margin-bottom:.8rem}
.premium-harita{width:100%;margin:.4rem 0 .3rem;min-height:120px}
.premium-harita svg{width:100%;height:auto;display:block}
/* il grubu DIŞINDA kalan path (Kıbrıs ana hattı) renksiz kalıp SİYAH çiziliyordu */
.premium-harita svg path{fill:#f3f4f6;stroke:#fff;stroke-width:.7}
.premium-harita .il path{fill:#e5e7eb;stroke:#fff;stroke-width:.7;transition:fill .15s}
.premium-harita .il.d1 path{fill:#fde68a}
.premium-harita .il.d2 path{fill:#fbbf24}
.premium-harita .il.d3 path{fill:#f59e0b}
.premium-harita .il.d4 path{fill:#d97706}
.premium-harita .il-dis path{fill:#f3f4f6}
.premium-harita .il[tabindex]{cursor:pointer;outline:none}
.premium-harita .il[tabindex]:hover path,.premium-harita .il[tabindex]:focus path{fill:var(--ana);stroke:#001b52}
.premium-lejant{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.8rem;color:var(--soluk);margin-bottom:1.2rem}
.premium-lejant .lj{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:-6px}
.lj-0{background:#e5e7eb}.lj-1{background:#fde68a}.lj-2{background:#fbbf24}.lj-3{background:#f59e0b}.lj-4{background:#d97706}
.premium-iller{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;list-style:none;padding:0}
.premium-iller .adet{color:var(--soluk);font-size:.85rem}
/* İLÇE HARİTASI (9 Eki 2026): il haritasıyla aynı renk ölçeği (d1-d3); ilçeler
   küçük olduğu için çizgi ince; seçili ilçe koyu çerçeve. Kart sarmalayıcısı
   ızgara düzenini bozmasın diye display:contents (gizlenince none). */
.ilce-harita svg path{stroke-width:.6}
.ilce-harita .il.secili path{fill:var(--ana);stroke:#001b52;stroke-width:1.6}
.ilce-harita{max-height:62vh}
.ilce-harita svg{max-height:62vh;width:auto;max-width:100%;margin:0 auto}
.harita-atif{font-size:.72rem;color:var(--soluk);margin:-.9rem 0 .8rem}
.harita-atif a{color:inherit}
.ilce-secim{background:#fff8e1;border:1px solid #ffe08a;border-radius:10px;padding:8px 12px;font-size:.92rem;margin:0 0 1rem}
.kart-sar{display:contents}
.kart-sar[hidden]{display:none}
/* İl sohbet odaları -- salt okunur (12 Eki 2026) */
.oda-atif{background:#fff8e1;border-color:#ffe08a;padding:12px 16px}
.oda-atif a{display:flex;flex-direction:column;gap:2px;color:#5d4500;text-decoration:none}
.oda-atif a:hover strong{text-decoration:underline}
.oda-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:1rem 0}
.oda-liste a{display:flex;justify-content:space-between;align-items:center;gap:6px;border:1px solid var(--cizgi);border-radius:8px;padding:8px 10px;background:#fff}
.oda-liste a:hover{border-color:var(--ana);text-decoration:none}
.oda-liste .oda-bos{color:var(--soluk)}
.oda-mesajlar{list-style:none;padding:0;margin:1rem 0}
.oda-mesaj{border:1px solid var(--cizgi);border-radius:10px;padding:10px 12px;margin:0 0 10px;background:#fff}
.oda-mesaj-bot{background:#f5f8ff;border-color:#c6d6fb}
.oda-ust{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:.86rem;color:var(--soluk);margin-bottom:4px}
.oda-yazar{font-weight:700;color:var(--metin, #222)}
.oda-etiket{background:#e8f0fe;color:var(--ana);border-radius:6px;padding:0 6px;font-size:.78rem}
.oda-metin{margin:.2em 0;white-space:pre-wrap;overflow-wrap:anywhere}
.oda-alinti{border-left:3px solid var(--cizgi);padding:2px 8px;margin:4px 0;color:var(--soluk);font-size:.88rem}
.oda-ilan{display:block;border:1px solid var(--cizgi);border-radius:8px;padding:6px 10px;margin:6px 0;font-size:.9rem;background:#fff}
.oda-ilan .kapali{color:#b3261e;font-weight:600}
.oda-ilceler{display:flex;flex-wrap:wrap;gap:6px;margin:.5rem 0 1rem}
.oda-ilceler a{border:1px solid var(--cizgi);border-radius:16px;padding:2px 10px;font-size:.88rem;background:#fff}
.oda-ilceler a.secili{background:var(--ana);color:#fff;border-color:var(--ana)}
.oda-katil{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--cizgi);padding:10px 0;text-align:center}

/* Telefonda QR anlamsız: kullanıcı zaten telefonda, kendi ekranını tarayamaz
   (18 Eki 2026, kullanıcı kararı; .etki-uygulama-qr ile aynı eşik). Mağaza
   düğmesi kalır. DOSYANIN SONUNDA durmalı: .uyg-qr-kutu{display:flex}
   daha aşağıda tanımlı, öne alınırsa onu ezemez. */
@media (max-width:600px){.cta-qr,.uyg-qr-kutu{display:none}}