/* ============================================================
   beytibasaran.com — genel site
   Yazı tipi Mulish: Türk Telekom kurumsal sitesinin kullandığı aile.
   Tek tema (açık) — her renk açıkça boyanır.
   ============================================================ */

:root{
  --kagit:#EEF2F9; --yuzey:#FFFFFF; --yuzey2:#F6F8FC; --cizgi:#DCE3EF; --cizgi-ince:#E9EEF6;
  --murekkep:#0B1220; --murekkep2:#4A5872; --murekkep3:#78869F;
  --lacivert:#0A1F44; --lacivert-2:#122E5F;
  --sinyal:#0B5FFF; --sinyal-yumusak:#E7EEFF; --sinyal-koyu:#0A4FD6;
  --fiber:#0FA7B0; --fiber-parlak:#14C0C9;
  --yayin:#E11D48;
  --golge:0 1px 2px rgba(10,31,68,.06), 0 8px 24px -12px rgba(10,31,68,.18);
  --golge-kart:0 1px 2px rgba(10,31,68,.05), 0 18px 40px -24px rgba(10,31,68,.35);
  --r:14px; --r-s:9px;
  --yazi:"Mulish","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kagit);color:var(--murekkep);font-family:var(--yazi);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--sinyal);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.015em;line-height:1.14}
p{margin:0}
.kap{width:min(100% - 40px,1180px);margin-inline:auto}
@media(max-width:640px){.kap{width:calc(100% - 32px)}}
@media(max-width:480px){.logo img{height:52px}}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--murekkep3)}
.atla{position:absolute;left:-9999px}
.atla:focus{left:12px;top:12px;z-index:100;background:var(--sinyal);color:#fff;padding:10px 16px;border-radius:8px}

/* ── üst bar ─────────────────────────────────────────────── */
.ustbar{background:var(--lacivert);color:#DDE6F5;font-size:12.5px}
.ustbar .kap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;min-height:38px;padding-block:7px}
.ustbar .kimlik{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#8FA9D6}
.ustbar .kimlik::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--fiber-parlak),var(--sinyal));border-radius:2px}
.ustbar .baglanti{display:flex;gap:18px;flex-wrap:wrap}
.ustbar a:hover{color:#fff}

/* ── başlık ──────────────────────────────────────────────── */
.baslik{position:sticky;top:0;z-index:40;background:var(--yuzey);border-bottom:1px solid var(--cizgi)}
.baslik .kap{display:flex;align-items:center;gap:20px;min-height:72px;padding-block:11px;position:relative}
.logo{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
/* max-height BUYUTMEZ: yuklenen logo 150x48 gibi kendi boyu kadarsa kural hic islemez.
   Bu yuzden height sabitlenir. Kucuk bir PNG buyutulunce yumusar; 2x logo yuklenmeli. */
.logo img{height:62px;width:auto;max-width:100%}
.logo .yazi{display:flex;flex-direction:column;line-height:1;min-width:0}
.logo .ad{font-size:23px;font-weight:800;letter-spacing:-.035em;color:var(--murekkep);white-space:nowrap}
.logo .alt{font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--murekkep3);margin-top:5px}
.menu{display:flex;gap:4px}
.menu a{padding:9px 14px;border-radius:99px;font-size:14.5px;font-weight:500;color:var(--murekkep2);transition:background .15s,color .15s}
.menu a:hover{background:var(--yuzey2);color:var(--murekkep)}
.menu a[aria-current="page"]{background:var(--sinyal-yumusak);color:var(--sinyal);font-weight:700}
.ara-btn{display:inline-flex;align-items:center;gap:8px;background:var(--sinyal);color:#fff;border:0;border-radius:99px;padding:11px 20px;font-weight:700;font-size:14.5px;white-space:nowrap}
.ara-btn:hover{background:var(--sinyal-koyu);color:#fff}
.menu-ac{display:none;background:none;border:1px solid var(--cizgi);border-radius:9px;width:42px;height:42px;color:var(--murekkep);font-size:18px;line-height:1}
@media(max-width:900px){
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--yuzey);border-bottom:1px solid var(--cizgi);padding:8px 20px 16px;box-shadow:var(--golge)}
  .menu a{border-radius:9px;padding:13px 14px}
  .menu-ac{display:block}
  .ara-btn{display:none}
}

/* ── yayın rayı ──────────────────────────────────────────── */
.ray{background:var(--lacivert-2);color:#CFE0FF;border-top:1px solid rgba(255,255,255,.07)}
.ray .kap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:12px}
.nokta{width:8px;height:8px;border-radius:50%;background:#FF4D6F;box-shadow:0 0 0 0 rgba(255,77,111,.6);animation:nabiz 2.2s infinite}
@keyframes nabiz{70%{box-shadow:0 0 0 9px rgba(255,77,111,0)}100%{box-shadow:0 0 0 0 rgba(255,77,111,0)}}
@media(prefers-reduced-motion:reduce){.nokta{animation:none}}
.ray .etiket{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.ray .ayrac{width:1px;height:14px;background:rgba(255,255,255,.18)}
.ray .bilgi{font-size:13px;color:#9FB6DE}
.ray .tarih{margin-left:auto;font-size:12.5px;color:#8FA9D6;font-variant-numeric:tabular-nums}

/* ── kampanya panosu ─────────────────────────────────────── */
.pano{padding:30px 0 12px}
.pano-ust{margin-bottom:14px}
.izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:800px){.izgara{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.reklam{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--yuzey);box-shadow:var(--golge-kart);border:1px solid var(--cizgi-ince);transition:transform .2s ease,box-shadow .2s ease}
a.reklam:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(10,31,68,.06),0 28px 50px -26px rgba(10,31,68,.5)}
@media(prefers-reduced-motion:reduce){.reklam,a.reklam:hover{transform:none;transition:none}}
.reklam .serit{display:block;height:3px;background:linear-gradient(90deg,var(--yayin) 0%,var(--sinyal) 45%,var(--fiber-parlak) 100%)}
/* height:auto ŞART — <img>'deki height özniteliği sunum ipucu olarak gerçek bir
   yükseklik üretir ve aspect-ratio'yu geçersiz kılar; kart tam boy açılır.
   object-fit:contain — görseller farklı dikey oranlarda geliyor; kırpma yerine
   çerçeveye sığdırılır, görselin tamamı görünür. */
.reklam .gorsel{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:var(--yuzey2)}
.reklam-alt{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-top:1px solid var(--cizgi-ince);background:var(--yuzey)}
.et-gecerlilik{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--murekkep3)}
.et-gecerlilik::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--yayin)}
.tarih-aralik{font-size:12.5px;font-weight:600;color:var(--murekkep);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── bölümler ────────────────────────────────────────────── */
.bolum{padding:52px 0}
.bolum.ince{padding:38px 0}
.bolum-ust{margin-bottom:22px}
.bolum-ust h2{font-size:clamp(21px,3vw,30px);font-weight:800;margin-top:9px}
.bolum-ust p{color:var(--murekkep2);margin-top:9px;max-width:60ch}

.mag-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:680px){.mag-izgara{grid-template-columns:minmax(0,1fr)}}
.mag{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--golge)}
.mag-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mag h3{font-size:20px;font-weight:800}
.kod{font-size:11.5px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--sinyal);background:var(--sinyal-yumusak);border-radius:6px;padding:4px 9px;white-space:nowrap}
.mag .adres{font-size:13.5px;color:var(--murekkep2);line-height:1.55}
.satirlar{display:grid;gap:1px;background:var(--cizgi-ince);border:1px solid var(--cizgi-ince);border-radius:var(--r-s);overflow:hidden}
.satir{display:flex;align-items:center;gap:12px;background:var(--yuzey);padding:9px 12px;font-size:13.5px}
.satir .et{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--murekkep3);width:60px;flex-shrink:0;white-space:nowrap}
.satir .dg{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--murekkep);overflow-wrap:anywhere}
.satir a.dg:hover{color:var(--sinyal)}
.satir.uzun{flex-direction:column;align-items:flex-start;gap:3px}
.satir.uzun .et{width:auto}
.yol{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--lacivert);color:#fff;border-radius:var(--r-s);padding:12px 16px;font-weight:700;font-size:14px;margin-top:auto}
.yol:hover{background:var(--sinyal);color:#fff}
.yol svg{flex-shrink:0}

.hiz-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.hiz{background:var(--yuzey);padding:24px 20px;display:flex;flex-direction:column;gap:7px}
.hiz .no{font-size:11px;color:var(--fiber);font-weight:800;font-variant-numeric:tabular-nums}
.hiz strong{font-size:16.5px;font-weight:800}
.hiz span{font-size:13.5px;color:var(--murekkep2)}

.cagri{background:var(--lacivert);color:#fff;border-radius:var(--r);padding:clamp(26px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:space-between;position:relative;overflow:hidden}
.cagri::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 260px at 92% 0%,rgba(20,192,201,.28),transparent 65%);pointer-events:none}
.cagri>*{position:relative}
.cagri h2{color:#fff;font-size:clamp(20px,3vw,29px);font-weight:800}
.cagri p{color:#A8BEE4;margin-top:9px;max-width:48ch;font-size:14.5px}
.cagri .butonlar{display:flex;gap:10px;flex-wrap:wrap}
.btn-beyaz{background:#fff;color:var(--lacivert);border-radius:99px;padding:13px 22px;font-weight:700;font-size:14.5px;border:0}
.btn-cizgi{background:transparent;border:1px solid rgba(255,255,255,.36);color:#fff;border-radius:99px;padding:13px 22px;font-weight:700;font-size:14.5px}
.btn-beyaz:hover{background:#E3EDFF;color:var(--lacivert)}
.btn-cizgi:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── içerik sayfaları ────────────────────────────────────── */
.sayfa-bas{background:var(--yuzey);border-bottom:1px solid var(--cizgi);padding:40px 0 34px}
.sayfa-bas h1{font-size:clamp(27px,4.6vw,42px);font-weight:800;margin-top:10px}
.sayfa-bas p{color:var(--murekkep2);margin-top:11px;max-width:62ch}
.metin{display:grid;gap:15px;max-width:66ch}
.metin p{color:var(--murekkep2);font-size:15px}
.metin h3{font-size:19px;font-weight:800;margin-top:14px}
.iki-sutun{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:860px){.iki-sutun{grid-template-columns:minmax(0,1fr);gap:28px}}
.kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:22px;box-shadow:var(--golge)}
.kutu h3{font-size:15px;font-weight:800;margin-bottom:14px}
.rakamlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;margin-top:10px}
.rakam{background:var(--yuzey);padding:20px}
.rakam b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rakam span{font-size:12.5px;color:var(--murekkep2)}

/* ── boş durum ───────────────────────────────────────────── */
.bos-durum{background:var(--yuzey);border:1px dashed var(--cizgi);border-radius:var(--r);padding:34px 24px;text-align:center;color:var(--murekkep2)}
.bos-durum b{display:block;color:var(--murekkep);font-size:16px;font-weight:800;margin-bottom:6px}

/* ── alt bilgi ───────────────────────────────────────────── */
.dip{background:var(--lacivert);color:#B7C9E6;margin-top:8px}
.dip .kap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding:46px 0 34px}
@media(max-width:820px){.dip .kap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:480px){.dip .kap{grid-template-columns:minmax(0,1fr)}}
.dip h4{color:#fff;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.dip ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px}
.dip a:hover{color:#fff}
.dip .marka .ad{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.03em}
.dip .marka img{max-height:44px;width:auto}
/* Koyu zemin logosu yüklenmediyse açık zemin logosu beyazlatılır. */
.dip .marka img.beyazlat{filter:brightness(0) invert(1)}
.dip .marka p{font-size:13.5px;margin-top:11px;max-width:34ch;color:#93A9CE}
.dip-alt{border-top:1px solid rgba(255,255,255,.1)}
.dip-alt .kap{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;padding:16px 0;font-size:12.5px;color:#8296B8}