/* ==========================================================================
   Haberleşme (sürücüler) sayfası (v2): karşılaştırma tablosu, sürücü kartları, veri akışı, davranış ve güvenlik blokları.
   Önek: hb-  · Ortak bileşenler (v2-*) bilesenler.css'tedir; burada yalnız bu sayfaya özgü ayarlar var.
   ========================================================================== */

.hb .v2-bolum{padding-block:clamp(56px,7vw,100px)}
.hb .v2-bolum--ince{padding-block:clamp(48px,6vw,80px)}
.hb-sec{scroll-margin-top:36px}
.hb .v2-baslik{margin-bottom:clamp(28px,3.6vw,48px)}
.hb .v2-ekran{isolation:isolate}
.hb-metin{min-width:0}
.hb-metin .v2-baslik{margin-bottom:26px}
.hb-metin .liste-onay{margin-bottom:1.4em}
.hb-metin .liste-onay li{color:var(--metin)}
.hb .v2-bolum--koyu .liste-onay li::before{background-color:rgba(47,155,255,.18); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none' stroke='%237CC0FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.7 2.6 2.6 5.4-5.6'/%3E%3C/svg%3E")}
.hb .ornek-not{display:none}

/* ---- sayfa içi gezinti: 9 giriş ---- */
.hb-gezinti .kap{max-width:none; padding-inline:0}
.hb-gezinti ul{gap:2px; padding-inline:max(var(--gutter),calc((100% - var(--kap)) / 2))}
.hb-gezinti a{padding:0 13px; font-size:.91rem}
.hb-gezinti li:first-child a{margin-left:-13px}
@media (max-width:640px){.hb-gezinti a{min-height:48px; padding:0 12px}}

/* ---- monogram ve güvenlik rozetleri ---- */
.hb-mono{display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:15px; color:#fff; font:800 .92rem/1 var(--font-baslik); letter-spacing:.02em;
  background:linear-gradient(145deg,#1C6BD0,#14264A); box-shadow:0 10px 22px -12px rgba(20,38,74,.7)}
.hb-mono--k{display:inline-grid; vertical-align:middle; width:32px; height:32px; border-radius:9px; font-size:.6rem; margin-right:11px; box-shadow:none}
.hb-guv{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 10px; border-radius:99px; font:700 .76rem/1.25 var(--font-govde); white-space:nowrap; border:1px solid transparent}
.hb-guv::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.hb-guv--yok{color:#7A4F00; background:#FFF4E0; border-color:#F2D9AE}
.hb-guv--var{color:#0F5C37; background:#E8F6EE; border-color:#BCE3CD}
.hb-guv--kimlik{color:#16457F; background:#EAF3FF; border-color:#C6DDF8}
.hb-guv--ag{color:#3A4C6B; background:#F2F6FC; border-color:#D6E2F2}

/* ---- veri akışı ---- */
.hb-akis{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.5fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:clamp(8px,1.4vw,18px); align-items:stretch}
.hb-akis-kol{padding:20px 22px; border-radius:16px; background:var(--zemin); border:1px solid var(--cizgi-2); min-width:0}
.hb-akis-kol h3{margin:0 0 10px; font-size:1rem; letter-spacing:-.005em}
.hb-akis-kol p{margin:0; font-size:.88rem; line-height:1.5; color:var(--gri)}
.hb-akis-kol ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.9rem; line-height:1.4}
.hb-akis-kol>ul>li{position:relative; padding-left:16px}
.hb-akis-kol>ul>li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--mavi)}
.hb-akis-kol--ana{background:linear-gradient(160deg,#10224A,#0A1630); border-color:rgba(124,176,255,.3); box-shadow:0 24px 50px -28px rgba(10,24,52,.7)}
.hb-akis-kol--ana h3{color:#fff}
.hb-akis-kol--ana p{color:#9FB4D6; margin-bottom:12px}
.hb-akis-ok{display:grid; place-items:center; color:var(--mavi)}
.hb-akis-ok .ikon{width:24px; height:24px}
.hb-akis-cipler{display:flex !important; flex-wrap:wrap; gap:6px !important}
.hb-akis-cipler>li{padding:0 !important}
.hb-akis-cipler>li::before{display:none}
.hb-akis-cipler a{display:inline-flex; padding:5px 10px; border-radius:99px; font-size:.76rem; font-weight:650; line-height:1.3; text-decoration:none; color:#E1EBFB; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16)}
.hb-akis-cipler a:hover{background:rgba(255,255,255,.16); color:#fff}
@media (max-width:1040px){
  .hb-akis{grid-template-columns:minmax(0,1fr)}
  .hb-akis-ok .ikon{transform:rotate(90deg)}
}
.hb-akis-cipler a.hb-cip-sim{border-style:dashed; background:transparent}

/* ---- karşılaştırma tablosu ---- */
.hb-tablo{min-width:860px}
.hb-tablo thead th{white-space:nowrap}
.hb-tablo tbody th[scope="row"]{width:21%; white-space:nowrap}
.hb-tablo tbody th a{display:inline-flex; align-items:center; color:var(--lac); text-decoration:none; font-weight:700}
.hb-tablo tbody th a:hover{color:var(--baglanti); text-decoration:underline}
.hb-tablo td{font-size:.93rem; line-height:1.5; color:var(--metin)}
.hb-tablo tbody tr:hover{background:#FAFCFF}
.hb-tablo .hb-guv{white-space:normal; border-radius:10px}
@media (min-width:901px){
  .hb-tablo td:nth-child(2){width:28%}
  .hb-tablo .hb-guv{white-space:nowrap; border-radius:99px}
}
.hb-dok{margin:22px 0 0}
@media (max-width:900px){
  .hb-tablo{min-width:0}
  .hb-tablo,.hb-tablo tbody,.hb-tablo tr,.hb-tablo th,.hb-tablo td{display:block}
  .hb-tablo thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .hb-tablo tbody tr{padding:16px 18px; border-bottom:1px solid var(--cizgi)}
  .hb-tablo tbody tr:last-child{border-bottom:0}
  .hb-tablo tbody th[scope="row"]{width:auto; padding:0 0 10px; border:0; white-space:normal}
  .hb-tablo td{display:grid; grid-template-columns:7.2rem minmax(0,1fr); gap:10px; padding:6px 0; border:0}
  .hb-tablo td::before{content:attr(data-et); font:700 .68rem/1.7 var(--font-baslik); letter-spacing:.1em; text-transform:uppercase; color:var(--gri)}
  .hb-tablo td .hb-guv{justify-self:start}
}

/* ---- sürücü kartları ---- */
.hb-kartlar{display:grid; gap:clamp(22px,2.6vw,34px); min-width:0}
.hb-surucu{gap:20px; padding:clamp(22px,2.8vw,36px); scroll-margin-top:36px; min-width:0}
.hb-s-ust{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center}
.hb-s-baslik h3{margin:0; font-size:clamp(1.25rem,2vw,1.5rem)}
.hb-s-baslik p{margin:3px 0 0; font-size:.92rem; color:var(--gri)}
.hb-s-ozet{margin:0; max-width:80ch; font-size:1.02rem !important; line-height:1.65; color:var(--metin) !important}
.hb-s-govde{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,2.4vw,32px); align-items:start}
.hb-bilgi{margin:0; display:grid; gap:18px; min-width:0}
.hb-bilgi dt{margin:0 0 8px; font:700 .7rem/1 var(--font-baslik); letter-spacing:.13em; text-transform:uppercase; color:var(--gri)}
.hb-bilgi dd{margin:0; font-size:.95rem; line-height:1.55; color:var(--metin)}
.hb-liste{list-style:none; margin:0; padding:0; gap:7px}
.hb-tipler .v2-cip{font:600 .74rem/1 ui-monospace,"Cascadia Mono",Consolas,monospace; background:#F3F6FB; border-color:#DCE4F1; min-height:28px; padding:0 10px}
.hb-kucuk{margin:8px 0 0 !important; font-size:.84rem !important; color:var(--gri) !important}
.hb-kod{min-width:0}
.hb-kod pre{white-space:normal; padding:16px 18px; font-size:.8rem; line-height:1.95}
.hb-satir{display:flex; min-width:max-content}
.hb-adr{flex:none; min-width:var(--w,16ch); white-space:pre; color:#C9E4FF}
.hb-satir .c{white-space:pre; font-style:normal}
.hb-s-sinir{padding-top:18px; border-top:1px solid var(--cizgi-2)}
.hb-s-sinir h4{margin:0 0 12px; font:700 .7rem/1 var(--font-baslik); letter-spacing:.13em; text-transform:uppercase; color:var(--gri)}
.hb-s-sinir ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 32px}
.hb-s-sinir li{position:relative; padding-left:22px; font-size:.93rem; line-height:1.5; color:var(--metin)}
.hb-s-sinir li::before{content:""; position:absolute; left:0; top:.62em; width:11px; height:2px; border-radius:2px; background:#C98A1A}
@media (max-width:960px){
  .hb-s-govde{grid-template-columns:minmax(0,1fr)}
  .hb-s-sinir ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .hb-satir{min-width:0; flex-wrap:wrap; column-gap:14px; margin-bottom:6px}
  .hb-adr{min-width:0; white-space:normal; word-break:break-all}
  .hb-satir .c{white-space:normal}
  .hb-kod pre{line-height:1.6}
  .hb-s-ust{grid-template-columns:auto minmax(0,1fr)}
  .hb-s-ust .hb-guv{grid-column:1/-1; justify-self:start}
}
.hb-sim-bol{align-items:start}
.hb-kartlar--tek .hb-s-govde{grid-template-columns:minmax(0,1fr)}
.hb-kartlar--tek .hb-s-sinir ul{grid-template-columns:minmax(0,1fr)}

/* ---- nasıl bağlanırsınız ---- */
.hb-adimlar>li{padding-top:66px}
.hb-adim-gorsel{margin:20px 0 0}
.hb-adim-gorsel figcaption{margin-top:12px; font-size:.88rem; color:#9FB4D6}

/* ---- ortak davranış ---- */
.hb-davranis .v2-kart{gap:12px}
.hb-zaman{list-style:none; margin:10px 0 0; padding:0; display:flex; justify-content:space-between; position:relative}
.hb-zaman::before{content:""; position:absolute; left:8px; right:8px; top:7px; height:2px; background:linear-gradient(90deg,var(--mavi),#C5D6EE)}
.hb-zaman li{position:relative; display:grid; justify-items:center; gap:8px; font:700 .74rem/1 var(--font-baslik); color:var(--gri)}
.hb-zaman i{position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--mavi)}

/* ---- güvenlik ---- */
.hb-guvenlik .v2-kart{gap:12px}
.hb-uyari{background:#FFFBF2; border-color:#F2D9AE}
.hb-uyari .v2-ikon{color:#B7701A; background:#FFF0D6; border-color:#F2D9AE}
.hb-portlar{margin-top:clamp(32px,4vw,48px); padding:clamp(22px,2.6vw,32px); border-radius:18px; background:var(--zemin); border:1px solid var(--cizgi-2)}
.hb-portlar h3{margin:0 0 6px; font-size:1.08rem}
.hb-portlar p{margin:0 0 16px; font-size:.95rem; color:var(--gri)}
.hb-portlar .v2-cipler{list-style:none; margin:0; padding:0; gap:8px}

/* ---- neler yok ---- */
.hb-yok{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px clamp(16px,2.4vw,28px)}
.hb-yok li{position:relative; padding:15px 18px 15px 58px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#D6E3F8; line-height:1.45}
.hb-yok li::before{content:"\00D7"; position:absolute; left:18px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(226,85,79,.18); color:#FF9A95; font:700 1.1rem/1 var(--font-baslik)}
@media (max-width:760px){.hb-yok{grid-template-columns:minmax(0,1fr)}}