/* Kablonet kampanya sayfası: sade, nötr zemin, tek düğme rengi. Marka geçişi yalnız giriş bölümünde. */
@font-face { font-family:'Manrope'; src:url('yazi/manrope-latin-ext.woff2') format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; src:url('yazi/manrope-latin.woff2') format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Marka: Türksat Kablo logosundan okundu */
  --marka-1:#349AD3; --marka-2:#256CB0; --marka-3:#2E3C8C;
  --marka-koyu:#1C5690; --marka-acik:#E6F2FA; --tint:#EEF4FA; --tint-cizgi:#C6D7E8;
  /* Nötrler. --cizgi-2 tıklanan kutuların kenarı: beyaz üstünde en az 3:1 görünür. */
  --murekkep:#0F172A; --metin:#334155; --soluk:#596471;
  --zemin:#F1F5F9; --yuzey:#fff; --cizgi:#D8E0EA; --cizgi-2:#8593A8;
  --tamam:#047857; --wa:#128C4A;
  --golge:0 1px 2px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.07);
}
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--zemin); color:var(--murekkep); font:500 16px/1.55 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
body.cubuklu { padding-bottom:76px; }
h1, h2, h3, p, ul { margin:0; }
a { color:inherit; }
svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:3px solid var(--marka-2); outline-offset:2px; }
.giris :focus-visible { outline-color:#fff; }
.giris-kart :focus-visible { outline-color:var(--marka-2); }
.kap { width:100%; max-width:1160px; margin:0 auto; padding:0 16px; }
.gizli { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Üst şerit */
.ust { position:sticky; top:0; z-index:20; background:var(--yuzey); border-bottom:1px solid var(--cizgi); }
.ust-ic { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; }
.marka { color:var(--murekkep); font-size:18px; font-weight:800; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
@media (max-width:420px) { .marka span { display:none; } }
.ust-sag { display:flex; align-items:center; gap:14px; }
.ust-link { display:inline-flex; align-items:center; min-height:44px; padding:6px 12px; border:1px solid var(--cizgi-2); border-radius:10px; color:var(--murekkep); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .16s,border-color .16s; }
.ust-link:hover { background:var(--tint); border-color:var(--marka-2); }
.ust-link[aria-current="page"] { background:var(--marka-2); border-color:var(--marka-2); color:#fff; }
.ust-tel { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--marka-koyu); font-size:15.5px; font-weight:800; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Telefonda önce sıkışır; numara ancak sığmadığı çok dar ekranda simgeye döner, arama yine çalışır */
@media (max-width:400px) {
  .ust-sag { gap:8px; }
  .ust-link { padding:6px 10px; font-size:13.5px; }
  .ust-tel { gap:6px; font-size:14px; }
}
@media (max-width:350px) {
  .ust-tel { min-width:44px; justify-content:center; }
  .tel-yazi { display:none; }
}

/* Giriş */
.giris { padding:30px 0 34px; background:linear-gradient(160deg,var(--marka-3),var(--marka-2)); color:#fff; }
.ust-yazi { margin-bottom:8px; color:#E6F2FA; font-size:14px; font-weight:700; }
.giris h1 { max-width:680px; font-size:clamp(27px,4.2vw,40px); line-height:1.14; font-weight:800; letter-spacing:-.03em; }
.giris-alt { max-width:560px; margin-top:12px; color:#E6F2FA; font-size:16.5px; }
.kimlik { max-width:560px; margin-top:10px; color:#E6F2FA; font-size:13.5px; }
.giris-kart { display:none; }
@media (min-width:960px) {
  .giris { padding:44px 0 48px; background:linear-gradient(105deg,var(--marka-3) 0%,var(--marka-2) 56%,var(--marka-1) 100%); }
  .giris-ic { display:flex; align-items:center; justify-content:space-between; gap:40px; }
  .giris-sol { flex:0 1 620px; min-width:0; }
  .giris-kart { flex:0 0 340px; display:block; padding:20px 22px 22px; border-radius:14px; background:var(--yuzey); color:var(--murekkep); box-shadow:0 12px 32px rgba(15,23,42,.18); }
  .giris-kart span { display:block; color:var(--soluk); font-size:13.5px; font-weight:700; }
  .giris-kart a.kart-tel { display:block; margin:2px 0 14px; color:var(--murekkep); font-size:27px; font-weight:800; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
}

/* Düğmeler: tek ana renk; WhatsApp ikincil, yeşil yalnız simgede */
.dugmeler { display:flex; flex-wrap:wrap; gap:8px; }
.dugme { flex:1 1 120px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:9px 14px; border:1px solid transparent; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .16s,border-color .16s; }
.dugme-ana { background:var(--marka-2); color:#fff; }
.dugme-ana:hover { background:var(--marka-koyu); }
.dugme-wa { background:var(--yuzey); border-color:var(--cizgi-2); color:var(--murekkep); }
.dugme-wa svg { color:var(--wa); }
.dugme-wa:hover { background:var(--tint); border-color:var(--marka-2); }

/* Liste */
.liste { padding:26px 0 36px; }
.liste-bas { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 16px; margin-bottom:16px; }
.liste-bas h2 { font-size:21px; font-weight:800; letter-spacing:-.02em; }
.liste-bas p { color:var(--soluk); font-size:13.5px; }
.kartlar { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:stretch; }
.kartlar.esit { align-items:start; }
@media (min-width:900px) { .kartlar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }

/* Kart */
.kart { display:flex; flex-direction:column; min-width:0; border:1px solid var(--cizgi); border-radius:14px; background:var(--yuzey); box-shadow:var(--golge); }
.kart-bas { padding:20px 22px 0; }
.kart-ad { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.kart-ad h3 { font-size:21px; line-height:1.2; font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere; }
.rozet { padding:3px 10px; border-radius:100px; background:var(--marka-acik); color:var(--marka-koyu); font-size:12.5px; font-weight:700; white-space:nowrap; }
.segmentler { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.seg-grup { flex:1 1 150px; min-width:0; }
.seg-etiket { display:block; margin-bottom:4px; color:var(--metin); font-size:13px; font-weight:700; }
.sureler, .tv-sec { display:flex; border:1px solid var(--cizgi-2); border-radius:10px; overflow:hidden; }
.sec { flex:1; min-width:0; min-height:44px; padding:6px 8px; border:0; background:var(--yuzey); color:var(--murekkep); font:700 14px 'Manrope',system-ui,sans-serif; cursor:pointer; white-space:nowrap; transition:background .16s,color .16s; }
.sec + .sec { border-left:1px solid var(--cizgi-2); }
.sec:hover { background:var(--tint); }
/* Seçili düğme dolu renkte: açık tonlar seçili olarak okunmuyordu */
.sec[aria-pressed="true"] { background:var(--marka-2); color:#fff; font-weight:800; }
.sec[aria-pressed="true"]:hover { background:var(--marka-koyu); }
.sec:focus-visible { outline-offset:-3px; }
.sec[aria-pressed="true"]:focus-visible { outline-color:#fff; }
@media (max-width:420px) { .seg-grup { flex-basis:100%; } }

.varyant { display:flex; flex-direction:column; flex:1; min-width:0; }
.v-ust { padding:14px 22px 16px; }
.v-ad, .hiz-yazi { display:none; font-weight:800; }
.v-ad { margin-bottom:4px; color:var(--marka-koyu); font-size:14.5px; }
.alt-baslik { color:var(--soluk); font-size:14px; line-height:1.4; }
.taahhut { margin-top:4px; color:var(--murekkep); font-size:14px; font-weight:700; }
.icerik { margin-top:10px; padding:0; list-style:none; }
.icerik li { display:flex; gap:8px; padding:2px 0; color:var(--metin); font-size:14.5px; overflow-wrap:anywhere; }
.icerik svg { width:16px; height:16px; margin-top:4px; color:var(--tamam); stroke-width:2.6; }
.ucretler { margin-top:8px; padding:0; list-style:none; }
.ucretler li { display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-top:1px solid var(--cizgi); color:var(--metin); font-size:13.5px; }
.ucretler b { color:var(--murekkep); font-weight:700; white-space:nowrap; }
.ek-secenek { margin-top:8px; color:var(--marka-koyu); font-size:13.5px; font-weight:700; line-height:1.4; }

/* Hız ve fiyat. Satırdaki kartlarda hizalı dursun diye aşağı itilir. */
.v-alt { margin-top:auto; padding:0 22px 18px; }
.hiz-kutu { margin-bottom:10px; }
.hiz-sec { display:block; color:var(--metin); font-size:13px; font-weight:700; }
.hiz-sec select { display:block; width:100%; min-height:44px; margin-top:4px; padding:8px 10px; border:1px solid var(--cizgi-2); border-radius:10px; background:var(--yuzey); color:var(--murekkep); font:700 16px 'Manrope',system-ui,sans-serif; cursor:pointer; }
.hiz-sec select:hover { border-color:var(--marka-2); }
.hiz-yazi { color:var(--murekkep); font-size:15px; }
.bant-fiyat { display:flex; margin-bottom:10px; border:1px solid var(--tint-cizgi); border-radius:10px; background:var(--tint); }
.bant-kol { flex:1 1 0; min-width:0; padding:10px 12px; }
.bant-kol + .bant-kol { border-left:1px solid var(--tint-cizgi); }
.bant-kol span { display:block; color:var(--soluk); font-size:12.5px; font-weight:700; }
.bant-kol strong { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px; }
.bant-kol b { color:var(--murekkep); font-size:24px; line-height:1.25; font-weight:800; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bant-kol i { color:var(--soluk); font-size:13px; font-style:normal; font-weight:700; }

/* Tam liste */
.tum { border-top:1px solid var(--cizgi); }
.tum summary { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 20px; border-radius:0 0 13px 13px; color:var(--marka-koyu); font-size:14px; font-weight:700; cursor:pointer; list-style:none; }
.tum summary::-webkit-details-marker { display:none; }
.tum summary::after { content:''; width:7px; height:7px; margin-top:-3px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .16s; }
.tum[open] summary { border-radius:0; }
.tum[open] summary::after { margin-top:3px; transform:rotate(-135deg); }
.tum summary { background:var(--tint); }
.tum summary:hover { background:var(--marka-acik); }
.tarife { width:calc(100% - 28px); margin:0 14px 14px; border-collapse:separate; border-spacing:0; border:1px solid var(--cizgi); border-radius:10px; overflow:hidden; font-variant-numeric:tabular-nums; }
.tarife thead th { padding:8px 10px; background:var(--tint); border-bottom:1px solid var(--cizgi); color:var(--soluk); font-size:12.5px; font-weight:700; line-height:1.25; text-align:left; }
.tarife tbody th, .tarife td { padding:8px 10px; border-top:1px solid var(--cizgi); font-size:14.5px; }
.tarife tbody tr:first-child th, .tarife tbody tr:first-child td { border-top:none; }
.tarife tbody th { color:var(--metin); font-weight:600; text-align:left; }
.tarife .sayi { text-align:right; white-space:nowrap; }
.tarife td.sayi { color:var(--murekkep); font-weight:700; }

/* Geniş kartta bilgi solda, fiyat sağda; tablo altta tam genişlik */
@media (min-width:1080px) {
  .varyant { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:1fr auto; }
  .v-ust { padding:16px 10px 18px 22px; }
  .v-alt { margin-top:0; padding:16px 22px 18px 10px; }
  .tum { grid-column:1 / -1; }
}

.bos { padding:40px 20px; border:1px dashed var(--cizgi-2); border-radius:14px; background:var(--yuzey); text-align:center; }
.bos h2 { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.bos p { margin-top:6px; color:var(--soluk); }
.notlar { margin-top:16px; padding-left:18px; color:var(--soluk); font-size:13.5px; }
.notlar li { padding:1px 0; }

/* İletişim */
.iletisim { padding:0 0 40px; }
.iletisim-kutu { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding:24px; border:1px solid var(--cizgi); border-radius:14px; background:var(--yuzey); box-shadow:var(--golge); }
.iletisim-sol { flex:1 1 300px; min-width:0; }
.iletisim h2 { font-size:clamp(21px,3vw,26px); line-height:1.2; font-weight:800; letter-spacing:-.02em; }
.iletisim p { margin-top:4px; color:var(--soluk); font-size:15.5px; }
.iletisim-sag { flex:1 1 300px; max-width:420px; min-width:0; }
.iletisim-tel { display:block; margin-bottom:10px; color:var(--murekkep); font-size:26px; font-weight:800; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Arıza listesine geçiş */
.ariza-gecis { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:14px 18px; border:1px solid var(--cizgi); border-radius:14px; background:var(--yuzey); box-shadow:var(--golge); color:var(--murekkep); font-size:15px; font-weight:700; text-decoration:none; transition:border-color .16s; }
.ariza-gecis span { color:var(--marka-koyu); white-space:nowrap; }
.ariza-gecis:hover { border-color:var(--marka-2); }

/* Arıza listesi */
.ariza-giris { padding:26px 0 28px; background:linear-gradient(160deg,var(--marka-3),var(--marka-2)); color:#fff; }
.ariza-giris h1 { font-size:clamp(25px,3.8vw,36px); line-height:1.15; font-weight:800; letter-spacing:-.03em; }
.ariza-yol { margin-bottom:6px; color:#E6F2FA; font-size:13.5px; }
.ariza-yol a { color:#fff; font-weight:700; }
.ariza-alt { margin-top:8px; color:#E6F2FA; font-size:16px; }
.ariza-giris :focus-visible { outline-color:#fff; }
.ariza-filtre { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ariza-filtre .sec { flex:0 0 auto; padding:6px 14px; border:1px solid var(--cizgi-2); border-radius:10px; }
.ariza-filtre .sec + .sec { border-left:1px solid var(--cizgi-2); }
.ariza-liste { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0; padding:0; list-style:none; }
@media (min-width:900px) { .ariza-liste { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ariza { min-width:0; padding:16px 18px; border:1px solid var(--cizgi); border-radius:14px; background:var(--yuzey); box-shadow:var(--golge); }
.ariza-ust { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ariza-ust h3 { font-size:17px; line-height:1.25; font-weight:800; letter-spacing:-.01em; overflow-wrap:anywhere; }
.ariza-durum { flex:none; padding:2px 10px; border-radius:100px; background:var(--marka-acik); color:var(--marka-koyu); font-size:12.5px; font-weight:800; }
.ariza-sokak { margin-top:2px; color:var(--metin); font-size:14px; }
.ariza-tip { margin-top:6px; color:var(--soluk); font-size:14px; line-height:1.4; }
.ariza-zaman { display:flex; flex-wrap:wrap; gap:6px 20px; margin:10px 0 0; }
.ariza-zaman dt { color:var(--soluk); font-size:12.5px; font-weight:700; }
.ariza-zaman dd { margin:0; color:var(--murekkep); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.ariza-not { margin-top:8px; color:var(--soluk); font-size:13px; }
.ariza-bos, .ariza-kaynak { margin-top:14px; color:var(--soluk); font-size:13.5px; }
.ariza-kaynak a { color:var(--marka-koyu); font-weight:700; }
.ariza-dugme { display:flex; justify-content:center; margin-top:14px; }
.ariza-dugme .dugme { flex:0 1 240px; }

/* Alt bilgi */
.alt { padding:24px 0; background:var(--murekkep); color:#CBD5E1; font-size:13.5px; }
.alt p + p { margin-top:6px; }
.alt a { color:#fff; font-weight:700; }
.alt :focus-visible { outline-color:#fff; }

/* Telefonda sabit iletişim çubuğu */
.alt-cubuk { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--yuzey); border-top:1px solid var(--cizgi); box-shadow:0 -4px 16px rgba(15,23,42,.06); }
.alt-cubuk .dugme { flex:1 1 0; }
@media (min-width:768px) {
  body.cubuklu { padding-bottom:0; }
  .alt-cubuk { display:none; }
  .liste { padding:34px 0 40px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }