/* HİB yaması (v1: 14.11.2026, v2: 15.11.2026)
   1) /sayfa/... adresindeki genel sayfanın görünümü (.hib-sayfa içindeki öğeler).
      Renkler, sitedeki DYS (mavi) ve Yeşil Pasaport (yeşil) sayfalarından alındı.
      Renkleri değiştirmek için aşağıdaki tema değişkenlerini düzenlemeniz yeterli.
   2) v2: Site geneli tek düzeltme: mobil menü uzun olduğunda kendi içinde kaydırılabilir
      (dosyanın sonunda, .hib-mobil-menu). */

/* ---------- Temalar ---------- */
.hib-sayfa,.hib-sayfa.hib-tema-mavi{
  --hib-vurgu:#2563eb;--hib-vurgu-koyu:#1d4ed8;--hib-vurgu-acik:#eff6ff;--hib-vurgu-kenar:#bfdbfe;
  --hib-serit:linear-gradient(90deg,#3b82f6,#6366f1,#2563eb);
  --hib-ortu:linear-gradient(to bottom right,rgba(30,58,138,.85),rgba(15,23,42,.8),rgba(30,58,138,.85));
  --hib-koyu:linear-gradient(to bottom right,#0f172a,#1e3a8a);
  --hib-hap-zemin:rgba(37,99,235,.3);--hib-hap-kenar:rgba(96,165,250,.5);--hib-ust-baslik:#93c5fd;
}
.hib-sayfa.hib-tema-yesil{
  --hib-vurgu:#059669;--hib-vurgu-koyu:#047857;--hib-vurgu-acik:#ecfdf5;--hib-vurgu-kenar:#a7f3d0;
  --hib-serit:linear-gradient(90deg,#10b981,#14b8a6,#22c55e);
  --hib-ortu:linear-gradient(to bottom right,rgba(6,78,59,.82),rgba(19,78,74,.78),rgba(20,83,45,.82));
  --hib-koyu:linear-gradient(to bottom right,#0f172a,#064e3b);
  --hib-hap-zemin:rgba(5,150,105,.3);--hib-hap-kenar:rgba(52,211,153,.5);--hib-ust-baslik:#6ee7b7;
}

/* ---------- Üst bölüm (başlık alanı) ---------- */
.hib-sayfa-hero{min-height:max(32vh,224px);padding:2.5rem 0;background:#0f172a}
.hib-sayfa-ortu{background:var(--hib-ortu)}
.hib-sayfa-yol{margin-bottom:1.25rem}
.hib-sayfa-yol a,.hib-sayfa-yol span{overflow-wrap:anywhere}
.hib-sayfa-ust-baslik{color:var(--hib-ust-baslik);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;margin:0 0 .75rem}
.hib-sayfa-baslik{color:#fff;font-weight:800;text-transform:uppercase;line-height:1.15;letter-spacing:.025em;font-size:clamp(1.75rem,4.2vw,3.5rem);text-shadow:0 8px 24px rgba(0,0,0,.35);overflow-wrap:break-word;hyphens:auto}
.hib-sayfa-hap{display:inline-block;margin-top:1.25rem;padding:.75rem 1.5rem;border-radius:.75rem;background:var(--hib-hap-zemin);border:1px solid var(--hib-hap-kenar);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hib-sayfa-hap p{margin:0;color:#fff;font-size:.95rem;font-weight:500}
@media (max-width:640px){.hib-sayfa-hero{padding:2rem 0}.hib-sayfa-hap{padding:.6rem 1rem}.hib-sayfa-hap p{font-size:.85rem}}

/* ---------- Gövde ---------- */
.hib-sayfa-govde{padding:4rem 0 5rem;background:linear-gradient(to bottom,#f8fafc,#f1f5f9)}
@media (max-width:640px){.hib-sayfa-govde{padding:2.5rem 0 3.5rem}}
.hib-sayfa-govde>div>.hib-video-kutu{margin-bottom:2.5rem}

/* ---------- İçerik yazı stilleri ---------- */
.hib-sayfa-icerik{color:#334155;font-size:1rem;line-height:1.75;overflow-wrap:break-word}
.hib-sayfa-icerik>:first-child{margin-top:0}
.hib-sayfa-icerik>:last-child{margin-bottom:0}
.hib-sayfa-icerik p{margin:0 0 1rem}
.hib-sayfa-icerik a{color:var(--hib-vurgu);font-weight:600;text-decoration:none;word-break:break-word}
.hib-sayfa-icerik a:hover{color:var(--hib-vurgu-koyu);text-decoration:underline}
.hib-sayfa-icerik strong,.hib-sayfa-icerik b{font-weight:700;color:#0f172a}
.hib-sayfa-icerik em,.hib-sayfa-icerik i{font-style:italic}
.hib-sayfa-icerik u{text-decoration:underline}
.hib-sayfa-icerik h1,.hib-sayfa-icerik h2{font-size:1.75rem;line-height:1.3;font-weight:700;color:#0f172a;margin:2.5rem 0 1rem}
.hib-sayfa-icerik h3{font-size:1.35rem;line-height:1.35;font-weight:700;color:#0f172a;margin:2rem 0 .75rem}
.hib-sayfa-icerik h4,.hib-sayfa-icerik h5,.hib-sayfa-icerik h6{font-size:1.1rem;line-height:1.4;font-weight:700;color:#1e293b;margin:1.5rem 0 .5rem}
@media (max-width:640px){.hib-sayfa-icerik h1,.hib-sayfa-icerik h2{font-size:1.4rem}.hib-sayfa-icerik h3{font-size:1.2rem}}
.hib-sayfa-icerik ul,.hib-sayfa-icerik ol{margin:0 0 1rem;padding-inline-start:1.5rem}
.hib-sayfa-icerik ul{list-style:disc}
.hib-sayfa-icerik ol{list-style:decimal}
.hib-sayfa-icerik ul ul,.hib-sayfa-icerik ol ul{list-style:circle;margin:.5rem 0 0}
.hib-sayfa-icerik ol ol{list-style:lower-alpha;margin:.5rem 0 0}
.hib-sayfa-icerik li{margin-bottom:.5rem}
.hib-sayfa-icerik li::marker{color:var(--hib-vurgu);font-weight:700}
.hib-sayfa-icerik img{max-width:100%;height:auto;border-radius:.75rem}
.hib-sayfa-icerik figure{margin:1.5rem 0}
.hib-sayfa-icerik figcaption{font-size:.875rem;color:#475569;margin-top:.5rem}
.hib-sayfa-icerik table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.hib-sayfa-icerik th,.hib-sayfa-icerik td{border:1px solid #e2e8f0;padding:.6rem .9rem;text-align:start;vertical-align:top}
.hib-sayfa-icerik th{background:#f1f5f9;font-weight:700;color:#0f172a}
.hib-sayfa-icerik blockquote{border-inline-start:4px solid var(--hib-vurgu);padding-inline-start:1.25rem;color:#475569;font-style:italic;margin:1.5rem 0}
.hib-sayfa-icerik hr{border:0;border-top:1px solid #e2e8f0;margin:2.5rem 0}
.hib-sayfa-icerik pre{white-space:pre-wrap;background:#f8fafc;border-radius:.5rem;padding:1rem}
.hib-sayfa-icerik iframe{max-width:100%}
.hib-sayfa-icerik .hib-ayarlar{display:none}

/* ---------- Hazır bloklar (şablonlarda kullanılır) ---------- */
/* Beyaz kart: <div class="hib-kutu">...</div> */
.hib-sayfa-icerik .hib-kutu{background:#fff;border:2px solid #f1f5f9;border-radius:1.5rem;box-shadow:0 20px 25px -5px rgba(15,23,42,.08),0 8px 10px -6px rgba(15,23,42,.08);padding:2rem;margin:0 0 2rem}
@media (max-width:640px){.hib-sayfa-icerik .hib-kutu{padding:1rem;border-radius:1rem}}
.hib-sayfa-icerik .hib-kutu>h2:first-child,.hib-sayfa-icerik .hib-kutu>h3:first-child{margin-top:0}
/* Ortalanmış metin: class="hib-ortali" */
.hib-sayfa-icerik .hib-ortali{text-align:center}
/* Bölüm başlığı: <div class="hib-bolum-baslik"><p>ÜST ETİKET</p><h2>Başlık</h2></div> */
.hib-sayfa-icerik .hib-bolum-baslik{text-align:center;margin:3rem 0 2rem}
.hib-sayfa-icerik .hib-bolum-baslik:first-child{margin-top:0}
.hib-sayfa-icerik .hib-bolum-baslik p{font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#475569;margin:0 0 .5rem}
.hib-sayfa-icerik .hib-bolum-baslik h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0}
.hib-sayfa-icerik .hib-bolum-baslik::after{content:"";display:block;width:6rem;height:.25rem;border-radius:9999px;background:var(--hib-serit);margin:1rem auto 0}
/* Kart başlığı (kartın içinde ortalı, büyük harf): <h2 class="hib-kart-basligi"> */
.hib-sayfa-icerik .hib-kart-basligi{text-align:center;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.25rem,2.4vw,1.75rem);margin:0 0 1.25rem}
/* Numaralı adım kartları: <ol class="hib-adimlar"><li>...</li></ol> */
.hib-sayfa-icerik ol.hib-adimlar{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:hib-adim}
.hib-sayfa-icerik ol.hib-adimlar>li{counter-increment:hib-adim;position:relative;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.875rem;padding-block:1rem;padding-inline:3.75rem 1.25rem;margin:0 0 .75rem;line-height:1.6}
.hib-sayfa-icerik ol.hib-adimlar>li::before{content:counter(hib-adim);position:absolute;inset-inline-start:1rem;top:.9rem;width:1.9rem;height:1.9rem;border-radius:9999px;background:var(--hib-vurgu);color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.hib-sayfa-icerik ol.hib-adimlar>li>ul,.hib-sayfa-icerik ol.hib-adimlar>li>ol{margin-top:.6rem;margin-bottom:0}
.hib-sayfa-icerik ol.hib-adimlar>li>ul>li,.hib-sayfa-icerik ol.hib-adimlar>li>ol>li{margin-bottom:.4rem}
@media (max-width:640px){.hib-sayfa-icerik ol.hib-adimlar>li{padding-block:.8rem;padding-inline:2.85rem .85rem}.hib-sayfa-icerik ol.hib-adimlar>li::before{inset-inline-start:.65rem;top:.8rem;width:1.6rem;height:1.6rem;font-size:.8rem}.hib-sayfa-icerik ol.hib-adimlar>li>ul,.hib-sayfa-icerik ol.hib-adimlar>li>ol{padding-inline-start:1.1rem}}
/* İndirilebilir dosya bağlantılarına otomatik tür etiketi */
.hib-sayfa-icerik a[href$=".pdf" i]::after,.hib-sayfa-icerik a[href$=".docx" i]::after,.hib-sayfa-icerik a[href$=".doc" i]::after,.hib-sayfa-icerik a[href$=".xlsx" i]::after,.hib-sayfa-icerik a[href$=".xls" i]::after,.hib-sayfa-icerik a[href$=".zip" i]::after{display:inline-block;margin-inline-start:.5rem;padding:.05rem .45rem;border-radius:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;vertical-align:.1em;background:var(--hib-vurgu-acik);color:var(--hib-vurgu-koyu);border:1px solid var(--hib-vurgu-kenar)}
.hib-sayfa-icerik a[href$=".pdf" i]::after{content:"PDF"}
.hib-sayfa-icerik a[href$=".docx" i]::after,.hib-sayfa-icerik a[href$=".doc" i]::after{content:"WORD"}
.hib-sayfa-icerik a[href$=".xlsx" i]::after,.hib-sayfa-icerik a[href$=".xls" i]::after{content:"EXCEL"}
.hib-sayfa-icerik a[href$=".zip" i]::after{content:"ZIP"}
.hib-sayfa-icerik a.hib-buton::after{content:none!important}
/* Bilgi kutusu (tema renginde) ve uyarı kutusu (turuncu) */
.hib-sayfa-icerik .hib-bilgi,.hib-sayfa-icerik .hib-uyari{border-radius:1rem;padding:1.5rem 1.75rem;margin:0 0 2rem;border:1px solid}
.hib-sayfa-icerik .hib-bilgi{background:linear-gradient(to right,#f8fafc,var(--hib-vurgu-acik));border-color:var(--hib-vurgu-kenar);border-inline-start:4px solid var(--hib-vurgu)}
.hib-sayfa-icerik .hib-uyari{background:#fffbeb;border-color:#fde68a;border-inline-start:4px solid #f59e0b}
.hib-sayfa-icerik .hib-uyari li::marker{color:#b45309}
.hib-sayfa-icerik .hib-bilgi>:last-child,.hib-sayfa-icerik .hib-uyari>:last-child{margin-bottom:0}
.hib-sayfa-icerik .hib-bilgi>h3:first-child,.hib-sayfa-icerik .hib-uyari>h3:first-child{margin-top:0}
@media (max-width:640px){.hib-sayfa-icerik .hib-bilgi,.hib-sayfa-icerik .hib-uyari{padding:1.1rem 1.1rem}}
/* Kenar çizgili kart: <div class="hib-kart"><h4>..</h4><p>..</p></div> */
.hib-sayfa-icerik .hib-kart{padding:1.25rem;border-radius:.75rem;background:linear-gradient(to right,#f8fafc,var(--hib-vurgu-acik));border-inline-start:4px solid var(--hib-vurgu);margin:0 0 1rem}
.hib-sayfa-icerik .hib-kart>:first-child{margin-top:0}.hib-sayfa-icerik .hib-kart>:last-child{margin-bottom:0}
/* İki sütun: <div class="hib-iki-kolon"><div class="hib-kutu">..</div><div class="hib-kutu">..</div></div> */
.hib-sayfa-icerik .hib-iki-kolon{display:grid;grid-template-columns:1fr;gap:2rem;margin:0 0 2rem}
.hib-sayfa-icerik .hib-iki-kolon>*{margin:0;min-width:0}
@media (min-width:1024px){.hib-sayfa-icerik .hib-iki-kolon{grid-template-columns:1fr 1fr}}
/* İletişim kutusu */
.hib-sayfa-icerik .hib-iletisim{padding:1.5rem;border-radius:1rem;background:linear-gradient(to bottom right,var(--hib-vurgu-acik),#fff);border:2px solid var(--hib-vurgu-kenar);margin:0 0 2rem}
.hib-sayfa-icerik .hib-iletisim>:first-child{margin-top:0}.hib-sayfa-icerik .hib-iletisim>:last-child{margin-bottom:0}
/* Buton: <a class="hib-buton" href="...">Metin</a> */
.hib-sayfa-icerik a.hib-buton{display:inline-flex;align-items:center;gap:.5rem;background:var(--hib-vurgu);color:#fff;font-weight:600;padding:.8rem 1.6rem;border-radius:.75rem;text-decoration:none;box-shadow:0 10px 15px -3px rgba(15,23,42,.15);transition:background-color .2s,transform .2s}
.hib-sayfa-icerik a.hib-buton:hover{background:var(--hib-vurgu-koyu);color:#fff;text-decoration:none;transform:translateY(-1px)}
.hib-sayfa-icerik a.hib-buton[target="_blank"]::before{content:"↗";font-weight:700}
.hib-sayfa-icerik a:focus-visible,.hib-sayfa-icerik summary:focus-visible{outline:3px solid var(--hib-vurgu);outline-offset:2px;border-radius:.25rem}
@media (prefers-reduced-motion:reduce){.hib-sayfa-icerik a.hib-buton{transition:none}.hib-sayfa-icerik a.hib-buton:hover{transform:none}}
/* Renkli tablo: <table class="hib-tablo"> */
.hib-sayfa-icerik table.hib-tablo{border-radius:1rem;border:2px solid #f1f5f9;box-shadow:0 20px 25px -5px rgba(15,23,42,.08);background:#fff}
.hib-sayfa-icerik table.hib-tablo th{background:var(--hib-serit);color:#fff;text-transform:uppercase;font-size:.85rem;border:0}
.hib-sayfa-icerik table.hib-tablo td{border:0;border-top:1px solid #f1f5f9}
.hib-sayfa-icerik table.hib-tablo td:first-child{font-weight:700;color:var(--hib-vurgu)}
/* Küçük not metni */
.hib-sayfa-icerik .hib-not{font-size:.875rem;color:#475569}
/* Görsel çerçevesi: <p class="hib-gorsel"><img src="..."></p> */
.hib-sayfa-icerik .hib-gorsel{text-align:center;margin:0 0 2rem}
.hib-sayfa-icerik .hib-gorsel img{border-radius:1.5rem;box-shadow:0 0 0 6px var(--hib-vurgu-acik),0 25px 50px -12px rgba(15,23,42,.25)}
/* Açılır soru-cevap: <details class="hib-sss"><summary>Soru</summary><div>Cevap</div></details> */
.hib-sayfa-icerik details.hib-sss{background:#fff;border:2px solid #e2e8f0;border-radius:.875rem;margin:0 0 .75rem;overflow:hidden;transition:border-color .2s}
.hib-sayfa-icerik details.hib-sss[open],.hib-sayfa-icerik details.hib-sss:hover{border-color:var(--hib-vurgu-kenar)}
.hib-sayfa-icerik details.hib-sss>summary{cursor:pointer;list-style:none;padding-block:1.1rem;padding-inline:1.25rem 3rem;font-weight:600;color:#0f172a;position:relative}
.hib-sayfa-icerik details.hib-sss>summary::-webkit-details-marker{display:none}
.hib-sayfa-icerik details.hib-sss>summary::after{content:"+";position:absolute;inset-inline-end:1.25rem;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1;color:var(--hib-vurgu)}
.hib-sayfa-icerik details.hib-sss[open]>summary::after{content:"−"}
.hib-sayfa-icerik details.hib-sss>:not(summary){padding:0 1.25rem 1.1rem}

/* ---------- Video ---------- */
.hib-video-kutu{position:relative;background:var(--hib-koyu,#0f172a);border-radius:1.5rem;padding:1.25rem;box-shadow:0 25px 50px -12px rgba(15,23,42,.35);margin:0 0 2rem}
.hib-video-kutu::before{content:"";display:block;padding-top:56.25%}
.hib-video-kutu iframe,.hib-video-kutu video{position:absolute;top:1.25rem;left:1.25rem;width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);border:0;border-radius:1rem;background:#000}
@media (max-width:640px){.hib-video-kutu{padding:.6rem;border-radius:1rem}.hib-video-kutu iframe,.hib-video-kutu video{top:.6rem;left:.6rem;width:calc(100% - 1.2rem);height:calc(100% - 1.2rem);border-radius:.6rem}}

/* ---------- v2: Site geneli düzeltme - mobil menü kaydırma ----------
   Mobil menü ekrana sabit üst çubuğun içinde açılıyor ve yüksekliği sınırsızdı; liste ekrandan
   uzun olunca alt maddelere ulaşılamıyordu. Kutu artık ekran yüksekliğinden üst çubuğun
   yüksekliği (telefonda 4rem = 64px, 768px ve üstünde 5rem = 80px) kadar kısa ve kendi içinde
   kaydırılabilir. Menünün sonuna gelince kaydırma arkadaki sayfaya geçmez. */
@media (max-width:1023.98px){
  .hib-mobil-menu{max-height:calc(100vh - 4rem - 2px);max-height:calc(100dvh - 4rem - 2px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
@media (min-width:768px) and (max-width:1023.98px){
  .hib-mobil-menu{max-height:calc(100vh - 5rem - 2px);max-height:calc(100dvh - 5rem - 2px)}
}