/* SURUM: TB-2026-07-29-B  —  bu satiri tarayicida gorebiliyorsaniz CSS gunceldir */
/* ==========================================================================
   TelcoBulut — site.css
   AÇIK TEMA. Bu bir tercih değil, bilinçli bir dayanıklılık kararıdır:
   koyu temada arka plan herhangi bir nedenle uygulanmazsa (yazdırma, zorunlu
   açık mod, native dropdown, e-posta istemcisi, kurumsal tarayıcı politikası)
   açık renkli yazı beyaz zeminde kaybolur. Koyu yazı / açık zemin bu şekilde
   bozulamaz. Tüm metin renkleri beyaz üzerinde en az 4.5:1 kontrast sağlar.
   ========================================================================== */

:root{
  /* Zeminler */
  --bg:            #ffffff;
  --bg-soft:       #f5f7fb;
  --bg-tint:       #eef2fa;   /* logo mavisinin çok açık tonu */
  --bg-ink:        #16203c;   /* yalnızca büyük bloklarda, beyaz yazıyla */

  /* Metin — hepsi beyaz üzerinde AA/AAA */
  --text:          #131a2e;   /* 15.8:1 */
  --text-muted:    #4a5573;   /* 7.6:1  */
  --text-subtle:   #5d6884;   /* 5.7:1  */

  /* Marka renkleri (logodan) */
  --blue:          #3f61bd;   /* beyaz üzerinde 5.6:1 — metin için güvenli */
  --blue-bright:   #5b7fd6;   /* yalnız dolgu/çerçeve, metin değil */
  --blue-wash:     #e8edfa;
  --coral:         #cf3a31;   /* beyaz üzerinde 5.4:1 — metin için güvenli */
  --coral-bright:  #ef4a41;   /* yalnız ince çizgi/dolgu — metin değil */
  --coral-deep:    #b22b23;   /* buton :hover — beyaz yazıyla 6.4:1 */
  --coral-on-wash: #c22f27;   /* coral-wash üzerinde küçük metin — 4.9:1 */
  --coral-wash:    #fdeceb;
  --taupe:         #7a6e5c;   /* beyaz üzerinde 5.9:1 */
  --taupe-wash:    #f4f1ea;

  --good:          #1a7f52;

  /* Kategori vurgu renkleri. Hepsi beyaz üzerinde en az 5:1, kendi açık
     tonları üzerinde en az 4.5:1 kontrast verir (WCAG AA). */
  --c-blue:   #3f61bd;  --c-blue-w:   #e8edfa;
  --c-teal:   #0f7a6b;  --c-teal-w:   #e3f4f1;
  --c-violet: #5b4bc4;  --c-violet-w: #ecebfa;
  --c-amber:  #8a5a10;  --c-amber-w:  #faf1e3;
  --c-green:  #1a7f52;  --c-green-w:  #e9f7f0;
  --c-coral:  #c22f27;  --c-coral-w:  #fdeceb;
  --line:          #dde3ee;
  --line-strong:   #c3cddf;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-s: 0 1px 2px rgba(19,26,46,.06), 0 2px 8px rgba(19,26,46,.05);
  --shadow-m: 0 4px 12px rgba(19,26,46,.07), 0 12px 32px rgba(19,26,46,.07);

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --container: 1200px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:light; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4,h5{ font-family:var(--display); margin:0; color:var(--text); font-weight:600; letter-spacing:-.015em; line-height:1.2; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:3px; }
::selection{ background:var(--blue); color:#fff; }
.ico{ flex-shrink:0; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 26px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; background:#fff; padding:10px 16px; z-index:9999; box-shadow:var(--shadow-m); border-radius:6px; }

/* ---------- Etiket / eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:20px; height:3px; background:currentColor; border-radius:2px; opacity:.9; }
.sec-blue .eyebrow{ color:var(--c-violet); }
.sec-warm .eyebrow{ color:var(--c-amber); }
.sec-soft .eyebrow{ color:var(--c-teal); }

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:100px; font-family:var(--body); font-weight:600; font-size:15.5px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none !important;
  transition:transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 6px 18px -8px rgba(207,58,49,.7); }
.btn-primary:hover{ background:var(--coral-deep); transform:translateY(-2px); }
.btn-outline{ background:#fff; color:var(--text); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn-onink{ background:#fff; color:var(--text); }
.btn-onink:hover{ background:var(--bg-tint); transform:translateY(-2px); }
.btn-lg{ padding:16px 30px; font-size:16.5px; }

/* ---------- Üst bar ---------- */
.topbar{ background:var(--bg-ink); color:#fff; font-size:13.5px; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; height:40px; }
/* Üst bardaki öğeler sıkışınca daralıp metni karakter karakter bölmesin.
   flex-shrink:0 + nowrap ile ya tam görünürler ya da (dar ekranda) gizlenirler. */
.topbar a, .topbar-note{ white-space:nowrap; flex-shrink:0; }
.topbar-left, .topbar-right{ min-width:0; }
.topbar a{ color:#fff; opacity:.92; display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover{ opacity:1; }
.topbar-left{ display:flex; gap:22px; align-items:center; flex-shrink:1; overflow:hidden; }
.topbar-note{ color:#c9d3ea; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid var(--line); }
.site-header.scrolled{ box-shadow:var(--shadow-s); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:84px; min-width:0; }
.brand{ display:flex; align-items:center; gap:13px; flex-shrink:0; text-decoration:none !important; }
.brand img{ height:44px; width:auto; max-width:280px; object-fit:contain; }
.brand-word{ font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.brand-word .a{ color:var(--coral); }
.brand-word .b{ color:var(--taupe); }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; min-width:0; flex-wrap:nowrap; }
.nav > li{ list-style:none; position:relative; }
.nav > li > a{
  display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:8px;
  font-size:15px; font-weight:500; color:var(--text); text-decoration:none !important;
  white-space:nowrap;   /* "Bulut Hizmetleri" / "Veri Merkezi" alt satıra kaymasın */
}
/* Dar masaüstünde menüyü kırmak yerine sıkıştır */
@media (max-width:1240px){
  .nav{ gap:0; }
  .nav > li > a{ padding:10px 9px; font-size:14.5px; }
  .brand-word{ font-size:24px; }
}
@media (max-width:1160px){
  .nav > li > a{ padding:9px 7px; font-size:14px; }
  .header-actions .btn{ padding:11px 18px; font-size:14.5px; }
  .brand-word{ font-size:23px; }
  .brand img{ height:38px; }
}
.nav > li > a:hover, .nav > li > a[aria-expanded="true"]{ background:var(--bg-tint); color:var(--blue); }
.nav > li > a.active{ color:var(--blue); }
.nav .caret{ width:9px; height:9px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); }

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:320px; max-height:70vh; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-m);
  padding:8px; margin:0; list-style:none; display:none; z-index:950;
}
/* Görünmez köprü: menü ile üst bağlantı arasındaki boşluğu doldurur.
   Boşluk açıkta kalırsa fare aşağı inerken ne bağlantının ne de menünün
   üzerinde olur; mouseleave tetiklenir ve menü elden kaçar.

   Köprü bilinçli olarak <li> üzerinde: menüde overflow-y:auto olduğu için
   .dropdown::before kutunun dışına taştığında KIRPILIR ve tıklama/hover
   hedefi olarak hiç var olmaz. <li>'de kırpma yok, bu yüzden burada çalışır. */
.nav > li:hover::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
}
.dropdown.open{ display:block; }
/* Açılırken hafif yukarıdan gelsin — kapanışta ani kaybolma hissi azalır */
.dropdown{ transform:translateY(-4px); opacity:0; transition:opacity .16s ease, transform .16s ease; }
.dropdown.open{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){ .dropdown{ transition:none; } }
.dropdown li a{
  display:block; padding:10px 14px; border-radius:8px; font-size:14.5px; color:var(--text);
  text-decoration:none !important;
}
.dropdown li a:hover{ background:var(--bg-tint); color:var(--blue); }

.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{ display:none; background:#fff; border:1px solid var(--line-strong); border-radius:8px;
  width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav-toggle span{ width:19px; height:2px; background:var(--text); border-radius:2px; }

/* ---------- Hero ---------- */
.hero{ padding:70px 0 64px; background:linear-gradient(180deg, var(--bg-tint), #fff 78%); border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.hero h1{ font-size:clamp(2.2rem, 4.2vw, 3.35rem); margin-bottom:20px; }
.hero h1 .hl{ color:var(--blue); }
.hero-sub{ font-size:18.5px; color:var(--text-muted); max-width:540px; margin-bottom:30px; }
.hero-actions{ display:flex; gap:13px; flex-wrap:wrap; margin-bottom:32px; }
.hero-points{ display:flex; gap:20px; flex-wrap:wrap; font-size:14.5px; color:var(--text-muted); }
.hero-points span{ display:inline-flex; align-items:center; gap:7px; }
.hero-points .ico{ color:var(--good); }

/* NOC paneli — açık zeminli kart */
.noc{ background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-l); box-shadow:var(--shadow-m); overflow:hidden; }
.noc-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.noc-head b{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.noc-live{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--good); font-weight:600; }
.noc-live i{ width:8px; height:8px; border-radius:50%; background:var(--good); display:block; animation:blink 2.2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.noc-stats{ display:grid; grid-template-columns:repeat(3,1fr); }
.noc-stat{ padding:20px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.noc-stat:nth-child(3){ border-right:0; }
.noc-stat b{ display:block; font-family:var(--mono); font-size:23px; font-weight:600; color:var(--text); }
.noc-stat.ok b{ color:var(--good); }
.noc-stat span{ font-size:12.5px; color:var(--text-subtle); }
.noc-log{ padding:16px 20px; font-family:var(--mono); font-size:12.5px; color:var(--text-muted); }
.noc-log div{ display:flex; gap:11px; padding:4px 0; }
.noc-log time{ color:var(--text-subtle); }
.noc-log b{ color:var(--good); margin-left:auto; }

/* ---------- Güven şeridi ---------- */
.trust{ background:var(--bg-soft); border-bottom:1px solid var(--line); padding:22px 0; }
.trust .wrap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.trust div{ font-size:14px; color:var(--text-muted); }
.trust b{ font-family:var(--mono); color:var(--text); font-weight:600; }

/* ---------- Bölümler ---------- */
section{ padding:80px 0; }
.sec-soft{ background:var(--bg-soft); }
.sec-blue{ background:linear-gradient(180deg,#f3f6fd,#eaf0fb); }
.sec-warm{ background:linear-gradient(180deg,#faf7f1,#f5f1e8); }
.sec-head{ max-width:660px; margin-bottom:44px; }
.sec-head h2{ font-size:clamp(1.75rem,2.9vw,2.4rem); margin-bottom:14px; }
.sec-head p{ color:var(--text-muted); font-size:17px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Hizmet kartları ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:26px 24px;
  display:flex; flex-direction:column; gap:12px; text-decoration:none !important; color:inherit;
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.card:hover{ border-color:var(--blue-bright); box-shadow:var(--shadow-m); transform:translateY(-3px); text-decoration:none; }
.card-ico{ width:46px; height:46px; border-radius:12px; background:var(--c-blue-w); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center; }
/* Kategoriye göre renk — kartlar tek tip mavi kalmasın */
.card.t1 .card-ico{ background:var(--c-blue-w);   color:var(--c-blue); }
.card.t2 .card-ico{ background:var(--c-green-w);  color:var(--c-green); }
.card.t3 .card-ico{ background:var(--c-coral-w);  color:var(--c-coral); }
.card.t4 .card-ico{ background:var(--c-violet-w); color:var(--c-violet); }
.card.t5 .card-ico{ background:var(--c-amber-w);  color:var(--c-amber); }
.card.t6 .card-ico{ background:var(--c-teal-w);   color:var(--c-teal); }
.card.t1 .tag{ color:var(--c-blue); }   .card.t2 .tag{ color:var(--c-green); }
.card.t3 .tag{ color:var(--c-coral); }  .card.t4 .tag{ color:var(--c-violet); }
.card.t5 .tag{ color:var(--c-amber); }  .card.t6 .tag{ color:var(--c-teal); }
.card.t1 .more{ color:var(--c-blue); }  .card.t2 .more{ color:var(--c-green); }
.card.t3 .more{ color:var(--c-coral); } .card.t4 .more{ color:var(--c-violet); }
.card.t5 .more{ color:var(--c-amber); } .card.t6 .more{ color:var(--c-teal); }
/* Üstte ince renk şeridi */
.card{ position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:currentColor; opacity:0; transition:opacity .2s; }
.card.t1::before{ background:var(--c-blue); }   .card.t2::before{ background:var(--c-green); }
.card.t3::before{ background:var(--c-coral); }  .card.t4::before{ background:var(--c-violet); }
.card.t5::before{ background:var(--c-amber); }  .card.t6::before{ background:var(--c-teal); }
.card:hover::before{ opacity:1; }
.card .tag{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.07em; color:var(--coral); text-transform:uppercase; }
.card h3{ font-size:18.5px; }
.card p{ color:var(--text-muted); font-size:15px; margin:0; flex-grow:1; }
.card .more{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--blue); }

/* ---------- Veri merkezi / özellik listesi ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.featlist{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:15px; }
.featlist li{ display:flex; gap:13px; align-items:flex-start; color:var(--text-muted); font-size:15.5px; }
.featlist .n{ font-family:var(--mono); font-size:12px; font-weight:600;
  border-radius:6px; padding:3px 8px; flex-shrink:0; margin-top:3px; }
.featlist li:nth-child(1) .n{ color:var(--c-blue);   background:var(--c-blue-w); }
.featlist li:nth-child(2) .n{ color:var(--c-green);  background:var(--c-green-w); }
.featlist li:nth-child(3) .n{ color:var(--c-violet); background:var(--c-violet-w); }
.featlist li:nth-child(4) .n{ color:var(--c-amber);  background:var(--c-amber-w); }

.rack{ background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-l); padding:22px; box-shadow:var(--shadow-s); }
.rack-u{ display:flex; align-items:center; gap:11px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:7px; padding:11px 14px; margin-bottom:7px; font-family:var(--mono); font-size:12.5px; color:var(--text-muted); }
.rack-u .led{ width:7px; height:7px; border-radius:50%; background:var(--good); flex-shrink:0; }
.rack-u .led.b{ background:var(--blue-bright); }
.rack-u .bars{ display:flex; gap:2.5px; margin-left:auto; }
.rack-u .bars i{ width:3.5px; height:11px; background:var(--line-strong); border-radius:1px; display:block; }
.rack-u .bars i.on{ background:var(--good); }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.spec{ border-left:3px solid var(--c-blue); padding-left:15px; }
.spec:nth-child(2){ border-left-color:var(--c-coral); }
.spec b{ display:block; font-family:var(--display); font-size:25px; }
.spec span{ font-size:13.5px; color:var(--text-muted); }

/* ---------- Neden biz ---------- */
.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.why .rule{ width:34px; height:3px; border-radius:2px; margin-bottom:16px; background:var(--c-blue); }
.why > div:nth-child(2) .rule{ background:var(--c-violet); }
.why > div:nth-child(3) .rule{ background:var(--c-amber); }
.why > div:nth-child(4) .rule{ background:var(--c-green); }
.why h3{ font-size:17.5px; margin-bottom:9px; }
.why p{ color:var(--text-muted); font-size:15px; margin:0; }

/* ---------- Referans rozetleri ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ border:1px solid var(--line-strong); background:#fff; border-radius:100px; padding:11px 20px;
  font-size:14.5px; color:var(--text); display:inline-flex; align-items:center; gap:9px; }
.chip i{ width:8px; height:8px; border-radius:50%; background:var(--blue-bright); display:block; }
.chips > :nth-child(5n+1){ border-color:var(--c-blue);   background:var(--c-blue-w); }
.chips > :nth-child(5n+1) i{ background:var(--c-blue); }
.chips > :nth-child(5n+2){ border-color:var(--c-green);  background:var(--c-green-w); }
.chips > :nth-child(5n+2) i{ background:var(--c-green); }
.chips > :nth-child(5n+3){ border-color:var(--c-violet); background:var(--c-violet-w); }
.chips > :nth-child(5n+3) i{ background:var(--c-violet); }
.chips > :nth-child(5n+4){ border-color:var(--c-amber);  background:var(--c-amber-w); }
.chips > :nth-child(5n+4) i{ background:var(--c-amber); }
.chips > :nth-child(5n+5){ border-color:var(--c-coral);  background:var(--c-coral-w); }
.chips > :nth-child(5n+5) i{ background:var(--c-coral); }
.chip small{ color:var(--text-subtle); font-size:12.5px; }

/* ---------- CTA bandı ---------- */
.cta{ background:linear-gradient(120deg,#16203c 0%,#1d2a52 55%,#2a2350 100%);
  color:#fff; border-radius:var(--radius-l); padding:52px 48px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.cta::before{ content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle,rgba(239,74,65,0.30),transparent 70%); }
.cta::after{ content:""; position:absolute; left:-70px; bottom:-110px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(91,127,214,0.28),transparent 70%); }
.cta > *{ position:relative; z-index:1; }
.cta h2{ color:#fff; font-size:clamp(1.6rem,2.5vw,2.1rem); max-width:520px; }
.cta p{ color:#c9d3ea; margin:10px 0 0; max-width:480px; }
.cta .btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- İçerik sayfaları ---------- */
.pagehead{ background:var(--bg-tint); border-bottom:1px solid var(--line); padding:44px 0 40px;
  position:relative; overflow:hidden; }
/* Sayfa başlıklarına renkli üst şerit ve yumuşak arka plan lekesi */
.pagehead::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-violet) 35%,var(--c-coral) 70%,var(--c-amber)); }
.pagehead::after{ content:""; position:absolute; right:-140px; top:-120px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle,rgba(91,127,214,0.28),transparent 70%); pointer-events:none; }
.pagehead > *{ position:relative; z-index:1; }
.crumbs{ font-size:13.5px; color:var(--text-subtle); margin-bottom:14px; }
.crumbs a{ color:var(--text-muted); }
.crumbs span{ margin:0 7px; }
.pagehead h1{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.pagehead .lead{ color:var(--text-muted); font-size:17.5px; margin-top:12px; max-width:680px; }

.layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:52px; align-items:start; }
.prose{ font-size:16.5px; color:var(--text); max-width:72ch; }
.prose p{ margin-bottom:1.15em; color:var(--text-muted); }
.prose strong{ color:var(--text); font-weight:650; }
.prose h2{ font-size:1.5rem; margin:1.8em 0 .6em; }
.prose h3{ font-size:1.2rem; margin:1.6em 0 .5em; }

.sidebar{ position:sticky; top:96px; }
.sidebox{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:22px; margin-bottom:18px; position:relative; overflow:hidden; }
.sidebox::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c-blue); }
.sidebox:nth-of-type(2)::before{ background:var(--c-coral); }
.sidebox h4{ font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-subtle); margin-bottom:14px; font-weight:600; }
.sidebox ul{ list-style:none; padding:0; margin:0; }
.sidebox li{ margin-bottom:3px; }
.sidebox li a{ display:block; padding:8px 11px; border-radius:7px; font-size:14.5px; color:var(--text); text-decoration:none !important; }
.sidebox li a:hover{ background:#fff; color:var(--blue); }
.sidebox li a.active{ background:#fff; color:var(--blue); font-weight:600; box-shadow:var(--shadow-s); }

/* ---------- Formlar ---------- */
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.formgrid .full{ grid-column:1/-1; }
label{ display:block; font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:6px; }
label .req{ color:var(--coral); }
input, textarea, select{
  width:100%; background:#fff; color:var(--text);
  border:1.5px solid var(--line-strong); border-radius:var(--radius-s);
  padding:12px 14px; font-family:var(--body); font-size:15.5px;
  transition:border-color .15s, box-shadow .15s;
  color-scheme:light;   /* native açılır listeler de açık temada kalsın */
}
input:hover, textarea:hover, select:hover{ border-color:#9fadc7; }
input:focus, textarea:focus, select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); outline:none; }
::placeholder{ color:#68728d; opacity:1; }
textarea{ min-height:130px; resize:vertical; }
/* option renkleri bilinçli olarak ayarlanmıyor: bazı tarayıcılar açılır listeyi
   işletim sisteminin kendi penceresinde çizer, yazı rengini zorlamak orada
   okunmayan sonuç üretebilir. Açık temada varsayılan zaten doğru. */
.hp{ position:absolute; left:-9999px; }

.alert{ border-radius:var(--radius-s); padding:14px 16px; margin-bottom:18px; font-size:15px; border:1.5px solid; }
.alert-ok{ background:#e9f7f0; border-color:#a8ddc5; color:#125c3c; }
.alert-err{ background:var(--coral-wash); border-color:#f3b4b0; color:#9c2b24; }
.alert ul{ margin:6px 0 0; padding-left:20px; }

/* ---------- Footer ---------- */
footer{ background:var(--bg-ink); color:#e6ebf7; padding:56px 0 26px; margin-top:0; }
footer h5{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:#9fb0d4; margin-bottom:16px; font-weight:600; padding-bottom:9px; position:relative; }
/* Sütun başlığı altındaki renkli çizgi.
   Varsayılan bir renk veriliyor: footer menüsü panelden düzenlenebildiği için
   sütun sayısı değişebilir; kural bulunmayan sütunda çizgi kaybolmasın. */
footer h5::after{
  content:""; position:absolute; left:0; bottom:0; width:26px; height:2px;
  border-radius:2px; background:#8aa3e6;
}
/* nth-child kullanılıyor, nth-of-type DEĞİL: .foot-grid'in ilk çocuğu
   .foot-about (o da bir div). nth-of-type tüm div'leri saydığı için
   numaralar bir kayıyor ve son sütun kuralsız kalıyordu. */
.foot-grid > *:nth-child(2) h5::after{ background:#8aa3e6; }
.foot-grid > *:nth-child(3) h5::after{ background:#7fe3bd; }
.foot-grid > *:nth-child(4) h5::after{ background:#c0aef5; }
.foot-grid > *:nth-child(5) h5::after{ background:#ffb0a9; }
.foot-grid > *:nth-child(6) h5::after{ background:#d6cbb6; }
.foot-grid > *:nth-child(7) h5::after{ background:#8fd9c8; }
footer{ border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--c-blue),var(--c-violet) 35%,var(--c-coral) 70%,var(--c-amber)) 1; }
footer a{ color:#e6ebf7; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }
.foot-grid{ display:grid; grid-template-columns:1.32fr repeat(4,1fr); gap:26px; margin-bottom:44px; }
.foot-about p{ color:#c3cee6; font-size:14.5px; margin-top:14px; max-width:270px; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ height:38px; width:auto; max-width:250px; object-fit:contain; }
.foot-brand .brand-word .a{ color:#ff8078; }
.foot-brand .brand-word .b{ color:#d6cbb6; }
.foot-col ul{ list-style:none; padding:0; margin:0; }
.foot-col li{ margin-bottom:10px; }
.foot-col a{ font-size:14px; color:#c3cee6; display:block; line-height:1.45; }
/* Kırılması gereken uzun bağlantılar ikinci satırda girintili dursun,
   kelime ortasından bölünmesin. */
.foot-col li{ margin-bottom:10px; }
.foot-col a{ text-wrap:pretty; }
.foot-contact{ margin-top:18px; font-size:14.5px; color:#c3cee6; display:flex; flex-direction:column; gap:9px; }
.foot-contact a, .foot-contact span{ display:inline-flex; align-items:flex-start; gap:9px; color:#e6ebf7; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px; color:#a9b7d4; }
.foot-bottom a{ color:#a9b7d4; }
.foot-bottom .legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- Reveal ---------- */
.rev{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
  .why{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px){
  .nav-toggle{ display:flex; }
  .nav{ display:none; position:fixed; inset:124px 0 0 0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:18px 22px 40px; overflow-y:auto; z-index:940; border-top:1px solid var(--line); }
  .nav.open{ display:flex; }
  .nav > li > a{ padding:15px 6px; border-bottom:1px solid var(--line); border-radius:0; font-size:16.5px; }
  .dropdown{ position:static; box-shadow:none; border:0; border-left:2px solid var(--line);
    border-radius:0; margin:2px 0 8px 10px; padding:2px 0; min-width:0; max-height:none; }
  .hero-grid, .split, .layout{ grid-template-columns:1fr; }
  .layout{ gap:40px; }
  .sidebar{ position:static; }
  .cards{ grid-template-columns:1fr 1fr; }
  .header-actions .btn{ display:none; }
}
@media (max-width:680px){
  .wrap{ padding:0 20px; }
  section{ padding:56px 0; }
  .cards, .why, .formgrid, .specs, .noc-stats{ grid-template-columns:1fr; }
  .noc-stat{ border-right:0; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .cta{ padding:34px 24px; }
  .topbar-left{ gap:14px; }
  .topbar-note{ display:none; }
  .trust .wrap{ gap:10px; }
}


/* ---------- Dil değiştirici ---------- */
.topbar-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.langsw{ display:inline-flex; gap:2px; align-items:center; }
.langsw a{
  padding:3px 9px; border-radius:5px; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  color:#c9d3ea; text-decoration:none !important;
}
.langsw a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.langsw a.on{ background:#fff; color:var(--bg-ink); }

/* ---------- Blog ---------- */
.postlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.postcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.postcard:hover{ border-color:var(--blue-bright); box-shadow:var(--shadow-m); transform:translateY(-3px); }
.postcard-img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg-tint); }
.postcard-img img{ aspect-ratio:16/9; }
.postcard-img img{ width:100%; height:100%; object-fit:cover; }
.postcard-body{ padding:24px; display:flex; flex-direction:column; gap:11px; flex-grow:1; }
.postcard h2{ font-size:20px; line-height:1.3; }
.postcard h2 a{ color:var(--text); text-decoration:none !important; }
.postcard h2 a:hover{ color:var(--blue); }
.postcard p{ color:var(--text-muted); font-size:15px; margin:0; flex-grow:1; }
.postcard .more{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--blue); }

.postmeta{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-subtle); flex-wrap:wrap; }
.pcat{
  background:var(--c-blue-w); color:var(--c-blue); border-radius:20px; padding:4px 12px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
}
.postlist > :nth-child(3n+2) .pcat{ background:var(--c-violet-w); color:var(--c-violet); }
.postlist > :nth-child(3n+3) .pcat{ background:var(--c-amber-w);  color:var(--c-amber); }
.cards > :nth-child(3n+2) .pcat{ background:var(--c-violet-w); color:var(--c-violet); }
.cards > :nth-child(3n+3) .pcat{ background:var(--c-amber-w);  color:var(--c-amber); }
.pagehead .postmeta{ margin-bottom:14px; }
.postcover{
  width:100%; border-radius:var(--radius-m); border:1px solid var(--line);
  margin-bottom:32px; aspect-ratio:16/9; object-fit:cover;
}
.card .postmeta{ margin-bottom:2px; }

@media (max-width:980px){ .postlist{ grid-template-columns:1fr; } }
/* Üst bar kademeli sadeleşir: önce tanıtım yazısı, sonra e-posta,
   en dar ekranda Online İşlemler'in yazısı gider. */
@media (max-width:900px){ .topbar-note{ display:none; } }
@media (max-width:560px){ .topbar-left a:last-child{ display:none; } }
@media (max-width:400px){
  .portal-btn span.lbl{ display:none; }
  .portal-btn{ padding:6px 9px; }
  .topbar-left a{ font-size:12.5px; }
  .langsw a{ padding:3px 6px; font-size:11.5px; }
}
@media (max-width:680px){
  .topbar-right{ gap:9px; }
  .topbar .wrap{ height:auto; padding-top:7px; padding-bottom:7px; gap:8px; }
  /* Dar ekranda e-posta bağlantısı gizlenir: telefon, Online İşlemler ve
     dil değiştirici birlikte sığmıyor ve satır taşıyordu. E-posta zaten
     altbilgide ve iletişim sayfasında var. */
  .topbar-left a:last-child{ display:none; }
  .topbar-left{ gap:12px; }
  .topbar-left a{ white-space:nowrap; }   /* numara iki satıra bölünmesin */
  .langsw a{ padding:3px 7px; font-size:12px; }
}


/* ==========================================================================
   ANASAYFA SLIDER
   ========================================================================== */
.slider{ position:relative; background:linear-gradient(180deg,var(--bg-tint),#fff 85%); border-bottom:1px solid var(--line); overflow:hidden; }
/* Tüm slaytlar aynı ızgara hücresinde üst üste durur. Böylece kapsayıcının
   yüksekliği en uzun slayta göre sabitlenir ve slayt değişince sayfa zıplamaz. */
.slides{ display:grid; }
.slide{
  grid-area:1 / 1;
  display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center;
  padding:64px 0 68px; opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease); pointer-events:none;
}
.slide.on{ opacity:1; visibility:visible; pointer-events:auto; }
.slide-art{ position:relative; }
.slide-art img{ width:100%; height:auto; border-radius:var(--radius-l); box-shadow:var(--shadow-m); border:1px solid var(--line); }
.slide h2{ font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.09; margin-bottom:18px; letter-spacing:-.02em; }
.slide h2 .hl{ color:var(--blue); }
.slide p{ font-size:18.5px; color:var(--text-muted); max-width:530px; margin-bottom:28px; }
.slide .eyebrow{ margin-bottom:16px; }
.slide-actions{ display:flex; gap:13px; flex-wrap:wrap; }

.slider-ui{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 0 28px; }
.dots{ display:flex; gap:9px; }
.dots button{
  width:34px; height:5px; border-radius:3px; border:0; padding:0; cursor:pointer;
  background:var(--line-strong); transition:background .25s, width .25s;
}
.dots button[aria-selected="true"]{ background:var(--coral); width:56px; }
.arrows{ display:flex; gap:9px; }
.arrows button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong);
  background:#fff; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s,color .2s,transform .2s;
}
.arrows button:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }

/* ==========================================================================
   GÖRSEL BÖLÜMLER
   ========================================================================== */
.pagehead{ position:relative; overflow:hidden; }
.pagehead-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
.pagehead-art img{ width:100%; height:auto; border-radius:var(--radius-l); border:1px solid var(--line-strong); box-shadow:var(--shadow-s); }

.figure{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--shadow-m); background:#fff; }
.figure img{ width:100%; height:auto; display:block; }
.figcap{ padding:14px 20px; font-size:13.5px; color:var(--text-subtle); border-top:1px solid var(--line); background:var(--bg-soft); }

/* İstatistik bandı */
.statband{ background:var(--bg-ink); color:#fff; }
.statband .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.statband .s{ padding:34px 24px; position:relative; }
.statband .s + .s::before{ content:""; position:absolute; left:0; top:26px; bottom:26px; width:1px; background:rgba(255,255,255,.16); }
.statband b{ display:block; font-family:var(--display); font-size:38px; line-height:1.1; color:#fff; }
.statband .s:nth-child(1) b{ color:#7fe3bd; }
.statband .s:nth-child(2) b{ color:#a8bdf0; }
.statband .s:nth-child(3) b{ color:#ffb0a9; }
.statband .s:nth-child(4) b{ color:#e2d5bb; }
.statband span{ font-size:14px; color:#c3cee6; }

/* Süreç adımları */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:st; }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  position:absolute; top:0; left:0; font-family:var(--mono); font-size:14px; font-weight:600;
  border-radius:9px; padding:7px 12px;
}
.step:nth-child(1)::before{ color:var(--c-blue);   background:var(--c-blue-w); }
.step:nth-child(2)::before{ color:var(--c-violet); background:var(--c-violet-w); }
.step:nth-child(3)::before{ color:var(--c-amber);  background:var(--c-amber-w); }
.step:nth-child(4)::before{ color:var(--c-green);  background:var(--c-green-w); }
.step::after{ content:""; position:absolute; top:19px; left:64px; right:-22px; height:1.5px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px,transparent 7px 14px); }
.step:last-child::after{ display:none; }
.step h3{ font-size:17px; margin-bottom:9px; }
.step p{ font-size:14.5px; color:var(--text-muted); margin:0; }

/* Özellik ızgarası (hizmet sayfaları) */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:36px 0 8px; }
.feat{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; }
.feat .fi{ width:40px; height:40px; border-radius:11px; border:0;
  display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.feat:nth-child(1) .fi{ background:var(--c-blue-w);  color:var(--c-blue); }
.feat:nth-child(2) .fi{ background:var(--c-green-w); color:var(--c-green); }
.feat:nth-child(3) .fi{ background:var(--c-amber-w); color:var(--c-amber); }
.feat h4{ font-size:15.5px; margin-bottom:7px; }
.feat p{ font-size:14px; color:var(--text-muted); margin:0; }

/* SSS akordeon */
.faq{ border-top:1px solid var(--line); margin-top:14px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:18px 40px 18px 0; font-weight:600; font-size:16px; position:relative;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--text-subtle); border-bottom:2px solid var(--text-subtle);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details p{ padding:0 0 20px; color:var(--text-muted); font-size:15.5px; margin:0; max-width:76ch; }

/* Mega menü */
.mega{ min-width:660px; padding:16px; }
/* Izgara düzeni YALNIZCA menü açıkken uygulanır. Aksi hâlde .mega üzerindeki
   display:grid, .dropdown üzerindeki display:none kuralını ezer ve menü
   sayfa yüklenir yüklenmez açık görünür. */
.dropdown.mega.open{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mega li a{ display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border-radius:9px; }
.mega .mi{ width:32px; height:32px; border-radius:8px; background:var(--blue-wash); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mega .mt{ display:block; font-weight:600; font-size:14.5px; color:var(--text); }
.mega .md{ display:block; font-size:12.5px; color:var(--text-subtle); line-height:1.45; margin-top:2px; }
.mega li a:hover .mt{ color:var(--blue); }

/* Harita */
/* Harita ekranın tamamına yayılır. Kapsayıcıdan taşırmak için
   negatif margin yerine viewport genişliği kullanılıyor; yatay kaydırma
   çubuğu oluşmaması için 100vw yerine 100% + hesaplanan taşma. */
/* .map-full zaten .wrap dışında, doğrudan section içinde durur; bu yüzden
   %100 genişlik yeterlidir. Daha önce 100vw kullanılıyordu ama 100vw dikey
   kaydırma çubuğunu da sayar ve masaüstünde ~15px yatay taşma yaratır. */
.map-full{
  width:100%;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--bg-soft);
  overflow:hidden;
}
.map-full iframe{ display:block; width:100%; height:520px; border:0; }
@media (max-width:680px){ .map-full iframe{ height:360px; } }

/* Ofis kartları */
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.office{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; }
.office .oi{ width:38px; height:38px; border-radius:10px; background:var(--coral-wash); color:var(--coral);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.office h4{ font-size:15.5px; margin-bottom:6px; }
.office p, .office a{ font-size:14.5px; color:var(--text-muted); margin:0; }
.office a:hover{ color:var(--blue); }

/* Logo şeridi */
.logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.logo-chip{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  height:78px; display:flex; align-items:center; justify-content:center; padding:12px;
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--text-subtle); text-align:center;
  transition:border-color .2s, color .2s;
}
.logo-chip:hover{ border-color:var(--blue-bright); color:var(--blue); }
/* Renk döngüsü 5 adımlı. Izgara 6 / 3 / 2 sütuna düştüğü için döngü
   uzunluğu bunlarla aralarında asal seçildi; aksi hâlde (örneğin 6'lık
   döngü + 6 sütun) her sütun aynı renge denk gelir ve dikey şerit oluşur. */
.logos > :nth-child(5n+1){ background:var(--c-blue-w);   color:var(--c-blue);   border-color:transparent; }
.logos > :nth-child(5n+2){ background:var(--c-green-w);  color:var(--c-green);  border-color:transparent; }
.logos > :nth-child(5n+3){ background:var(--c-violet-w); color:var(--c-violet); border-color:transparent; }
.logos > :nth-child(5n+4){ background:var(--c-amber-w);  color:var(--c-amber);  border-color:transparent; }
.logos > :nth-child(5n+5){ background:var(--c-coral-w);  color:var(--c-coral);  border-color:transparent; }

/* Alıntı */
.quote{ background:var(--bg-tint); border-left:4px solid var(--blue); border-radius:0 var(--radius-m) var(--radius-m) 0;
  padding:26px 30px; margin:32px 0; }
.quote p{ font-size:18px; line-height:1.6; color:var(--text); margin-bottom:12px; font-family:var(--display); }
.quote cite{ font-size:14px; color:var(--text-subtle); font-style:normal; }

@media (max-width:980px){
  .slide{ grid-template-columns:1fr; gap:32px; padding:44px 0 48px; }
  .slide-art{ order:-1; }
  .pagehead-grid{ grid-template-columns:1fr; gap:30px; }
  .statband .wrap{ grid-template-columns:1fr 1fr; }
  .statband .s:nth-child(3)::before{ display:none; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step::after{ display:none; }
  .feats{ grid-template-columns:1fr 1fr; }
  .offices{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(3,1fr); }
  .mega{ min-width:0; }
  .dropdown.mega.open{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .statband .wrap{ grid-template-columns:1fr; }
  .statband .s + .s::before{ display:none; }
  .statband .s{ border-top:1px solid rgba(255,255,255,.16); }
  .steps, .feats{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:1fr 1fr; }
  .slider-ui{ flex-direction:column-reverse; align-items:flex-start; gap:14px; }
  .mapwrap iframe{ height:300px; }
}


/* ==========================================================================
   YUKARI ÇIK BUTONU
   ========================================================================== */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:800;
  width:52px; height:52px; border-radius:14px;
  background:var(--bg-ink); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px -6px rgba(19,26,46,.55);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--c-blue); transform:translateY(-3px); }
.to-top:active{ transform:translateY(0); }
/* İlerleme halkası: sayfanın ne kadarının okunduğunu gösterir */
.to-top svg.ring{ position:absolute; inset:0; width:52px; height:52px; transform:rotate(-90deg); pointer-events:none; }
.to-top svg.ring circle{ fill:none; stroke-width:3; }
.to-top svg.ring .bg{ stroke:rgba(255,255,255,.18); }
.to-top svg.ring .fg{ stroke:var(--coral-bright); stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
@media (max-width:680px){
  .to-top{ right:16px; bottom:16px; width:46px; height:46px; border-radius:12px; }
  .to-top svg.ring{ width:46px; height:46px; }
}
@media print{ .to-top{ display:none !important; } }

/* ==========================================================================
   ÜST BAR — Online İşlemler girişi
   ========================================================================== */
.portal-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--coral); color:#fff !important;   /* beyaz yazıyla 4.9:1 — AA */
  padding:5px 14px; border-radius:100px; font-size:13px; font-weight:600;
  text-decoration:none !important; transition:background .2s, transform .2s;
  white-space:nowrap;
}
.portal-btn:hover{ background:#fff; color:var(--bg-ink) !important; transform:translateY(-1px); }
.portal-btn .ico{ flex-shrink:0; }
@media (max-width:900px){ .portal-btn span.lbl{ display:none; } .portal-btn{ padding:6px 9px; } }

/* ---------- Yazdırma ----------
   Açık tema olduğu için yazdırmada özel bir kurtarma gerekmiyor; yalnızca
   gereksiz arayüz öğeleri gizleniyor ve bağlantı adresleri yazdırılıyor. */
@media print{
  .topbar, .site-header, .cta, .nav-toggle, form, footer .foot-col, .rev{ display:none !important; }
  .rev{ display:block !important; opacity:1 !important; transform:none !important; }
  body{ font-size:11.5pt; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  footer{ background:#fff !important; color:#000 !important; border-top:1px solid #999; }
  footer a, .foot-about p, .foot-contact a, .foot-contact span{ color:#000 !important; }
}