/* =====================================================================
   RVZ Bilişim — tasarım sistemi (2026-10, kurumsal sürüm)
   Kurumsal güvenlik/altyapı firmalarının dili: Inter (düz, kalın başlıklar),
   beyaz zemin, kömür gri yazı, RVZ mavisi tek vurgu rengi, logo laciverti koyu bölümler,
   hap biçimli büyük harfli düğmeler, alt kenarı kavisli tam genişlik sayfa başı.
   Sayfa başı açık mavi-gri (#dfe7f1), koyu yazı; koyu bölümler lacivert #18365c.
   YAPMA: tek genişlikli (mono) etiket, renk geçişli yazı, cam kutu, parlama gölgesi, pencere düğmeleri.
   Bütün sayfalar YALNIZ bu dosyayı kullanır (+ gerekirse sayfaya özel küçük <style>).
   ===================================================================== */

/* ---------- Yazı tipleri (Google'a istek yok) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); 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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); 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; }
/* Kod blokları için (yalnız blog yazılarındaki <code>/<pre>) */
@font-face { font-family: 'JBMono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'); 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; }
@font-face { font-family: 'JBMono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations'); 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; }

/* ---------- Renk ve ölçü değişkenleri ---------- */
:root {
  --zemin: #ffffff; --zemin-2: #f3f4f6; --kart: #fff; --cizgi: #e2e5e9; --cizgi-2: #eef0f2;
  --yazi: #2b2f36; --yazi-2: #474d56; --soluk: #69707a;
  --siyah: #111a27; --koyu: #18365c; --koyu-2: #20436e; --koyu-3: #2a5182; --hero-zemin: #dfe7f1;
  --ana: #1a62b0; --ana-koyu: #134d8e; --ana-acik: #e9f1fa; --ana-cizgi: #c6d9ef; --ana-yazi: #155497;
  --ana-koyuda: #7fb2ea; /* koyu zeminde vurgu */
  --mavi: #1a62b0; --mavi-acik: #e9f1fa; --mavi-yazi: #155497;
  --yesil: #138a4b; --yesil-acik: #e6f5ec;
  --turuncu: #c96a0c; --turuncu-acik: #fdf1e3;
  --kirmizi: #c62828; --kirmizi-acik: #fcebeb;
  --golge: 0 2px 8px rgba(0,0,0,.07);
  --golge-2: 0 10px 28px rgba(0,0,0,.12);
  --golge-ana: none;
  --r: 8px; --r-2: 12px; --r-3: 14px;
  --kap: 1200px;
  --yazi-tipi: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Eski sayfa stillerinde var(--mono) geçen yerler artık düz Inter (rakamlar eşit genişlikte) */
  --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kod: 'JBMono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --degrade-koyu: linear-gradient(0deg, #18365c, #18365c);
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--yazi-tipi); font-size: 16px; line-height: 1.6; color: var(--yazi-2); background: var(--zemin); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { max-width: 100%; display: block; }
a { color: var(--ana-yazi); text-decoration: none; }
a:hover { color: var(--ana); }
h1, h2, h3, h4, h5 { color: var(--yazi); font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
.mono { font-family: var(--yazi-tipi); font-variant-numeric: tabular-nums; }
.vurgu { color: inherit; }
h1, h2, .cagri h2 { text-wrap: balance; }
::selection { background: var(--ana-acik); color: var(--ana-yazi); }
:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; border-radius: 4px; }
.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 24px; }
.gizli-yazi { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Üst şerit (siyah, ince) ---------- */
.ust-serit { background: var(--siyah); color: #d5d9de; font-size: 12.5px; }
.ust-serit .kap { display: flex; justify-content: flex-end; align-items: center; gap: 4px; height: 36px; }
.ust-serit a { color: #e3e6ea; font-weight: 500; padding: 0 10px; border-left: 1px solid rgba(255,255,255,.22); line-height: 1; }
.ust-serit a:first-child { border-left: 0; }
.ust-serit a:hover { color: #fff; }
.ust-serit .serit-sol { margin-right: auto; color: #aab1ba; }

/* ---------- Üst menü ---------- */
.ust { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--cizgi); }
.ust .kap { display: flex; align-items: center; gap: 24px; height: 72px; }
.ust .logo img { height: 38px; width: auto; }
.ust nav { flex: 1; }
.ust nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; justify-content: center; }
.ust nav a { display: block; padding: 24px 11px 22px; color: var(--yazi); font-size: 14.5px; font-weight: 600; border-bottom: 3px solid transparent; }
.ust nav a:hover { color: var(--ana); }
.ust nav a[aria-current="page"] { color: var(--ana); border-bottom-color: var(--ana); }
.ust nav a.ozel { color: var(--yazi); }
.ust nav a.ozel:hover, .ust nav a.ozel[aria-current="page"] { color: var(--ana); }
.ust nav .yalniz-mobil { display: none; }
.ust .eylem { display: flex; gap: 10px; align-items: center; }
.menu-dugme { display: none; width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: 50%; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-dugme span { display: block; width: 18px; height: 2px; background: var(--yazi); position: relative; }
.menu-dugme span::before, .menu-dugme span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--yazi); transition: transform .2s; }
.menu-dugme span::before { top: -6px; } .menu-dugme span::after { top: 6px; }
.ust.acik .menu-dugme span { background: transparent; }
.ust.acik .menu-dugme span::before { transform: translateY(6px) rotate(45deg); }
.ust.acik .menu-dugme span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Düğmeler (hap, büyük harf) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px; font: 600 14px/1 var(--yazi-tipi); letter-spacing: .02em; text-transform: uppercase; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-ana { background: var(--ana); color: #fff; }
.btn-ana:hover { background: var(--ana-koyu); color: #fff; }
.btn-hayalet { background: #fff; color: var(--yazi); border-color: var(--yazi); }
.btn-hayalet:hover { background: var(--yazi); color: #fff; }
.btn-cam { background: transparent; color: #fff; border-color: #fff; }
.btn-cam:hover { background: #fff; color: var(--yazi); }
.btn-kucuk { height: 40px; padding: 0 18px; font-size: 13px; }
.btn-buyuk { height: 54px; padding: 0 30px; font-size: 15px; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 14px; }
.koyu-bolum .btn-ana, .cagri .btn-ana { background: #fff; color: var(--yazi); }
.koyu-bolum .btn-ana:hover, .cagri .btn-ana:hover { background: var(--ana-acik); color: var(--yazi); }

/* ---------- Etiketler / rozetler ---------- */
.ust-etiket { display: block; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--ana); margin-bottom: 12px; }
.koyu-bolum .ust-etiket, .cagri .ust-etiket { color: var(--ana-koyuda); }
.rozet { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; background: var(--ana-acik); color: var(--ana-yazi); }
.rozet svg { width: 14px; height: 14px; }
.rozet-mavi { background: var(--mavi-acik); color: var(--mavi-yazi); }
.rozet-yesil { background: var(--yesil-acik); color: var(--yesil); }
.rozet-turuncu { background: var(--turuncu-acik); color: var(--turuncu); }
.rozet-gri { background: var(--zemin-2); color: var(--yazi-2); }
.rozet-cam { background: rgba(255,255,255,.1); color: #fff; }
.nokta-canli { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }

/* ---------- Bölümler ---------- */
.bolum { padding: 96px 0; }
.bolum-sik { padding: 64px 0; }
.bolum-beyaz { background: var(--zemin-2); }
.bolum-baslik { max-width: 760px; margin: 0 0 48px; }
.bolum-baslik.orta { margin-left: auto; margin-right: auto; text-align: center; }
.bolum-baslik p { font-size: 18px; color: var(--soluk); margin: 0; }
.koyu-bolum { background: var(--koyu); color: #c3ccd7; position: relative; overflow: hidden; }
.koyu-bolum h1, .koyu-bolum h2, .koyu-bolum h3, .koyu-bolum h4 { color: #fff; }
.koyu-bolum p { color: #c3ccd7; }
.koyu-bolum .bolum-baslik p { color: #aab5c3; }
.koyu-bolum a:not(.btn) { color: var(--ana-koyuda); }

/* ---------- Sayfa başı: tam genişlik, AÇIK mavi-gri (kullanıcı: koyu göz yoruyor), alt kenarı kavisli ---------- */
.hero-alan { position: relative; background: var(--hero-zemin); color: var(--yazi-2); border-radius: 0 0 50% 50% / 0 0 72px 72px; overflow: hidden; isolation: isolate; }
.hero { position: relative; background: none; color: var(--yazi-2); padding: 88px 0 124px; }
.hero h1 { color: var(--yazi); margin-bottom: 18px; }
.hero .hero-ozet { font-size: 20px; line-height: 1.55; color: #3d4652; max-width: 640px; margin-bottom: 34px; }
.hero-izgara { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-tarih { font-size: 14px; color: var(--soluk); margin-bottom: 10px; }
.hero-kucuk { padding: 64px 0 104px; }
.hero-kucuk h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.hero-kucuk .hero-ozet { font-size: 18.5px; }
/* Sayfa başında sağda duran görsel (isteğe bağlı): <img class="hero-gorsel"> */
.hero-gorsel { width: 100%; height: auto; }
.cam-kutu { background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge); border-radius: var(--r-2); padding: 22px; }
.cam-istatistikler { display: flex; flex-wrap: wrap; gap: 0; margin-top: 44px; }
.cam-istatistik { min-width: 140px; padding: 2px 28px 2px 0; margin-right: 28px; border-right: 1px solid #cdd6e1; }
.cam-istatistik:last-child { border-right: 0; margin-right: 0; }
.cam-istatistik b { display: block; font: 700 30px/1.1 var(--yazi-tipi); color: var(--yazi); }
.cam-istatistik span { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--soluk); }
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--soluk); margin-bottom: 20px; }
.kirinti a { color: var(--yazi-2); } .kirinti a:hover { color: var(--ana); text-decoration: underline; }

/* ---------- Kartlar ---------- */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-2); padding: 28px; box-shadow: var(--golge); transition: box-shadow .2s, border-color .2s; }
a.kart, .kart.etkilesimli { color: inherit; display: block; }
a.kart:hover, .kart.etkilesimli:hover { box-shadow: var(--golge-2); border-color: var(--ana-cizgi); }
.kart h3 { margin-bottom: 10px; }
.kart p { color: var(--soluk); font-size: 15px; margin: 0; }
.kart-alt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cizgi-2); display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.kart-alt .mono { color: var(--soluk); font-size: 13px; }
.kart-link { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ana); display: inline-flex; align-items: center; gap: 8px; }
.simge { width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--ana); margin-bottom: 18px; flex: none; }
.simge svg { width: 36px; height: 36px; stroke-width: 1.6; }
.simge-mavi { color: var(--mavi); }
.simge-yesil { color: var(--yesil); }
.simge-turuncu { color: var(--turuncu); }
.simge-kirmizi { color: var(--kirmizi); }
.simge-koyu { color: var(--koyu); }
.koyu-bolum .kart { background: var(--koyu-2); border-color: rgba(255,255,255,.1); box-shadow: none; }
.koyu-bolum .kart p { color: #aab5c3; }
.koyu-bolum .kart-alt { border-top-color: rgba(255,255,255,.1); }
.koyu-bolum .simge { color: var(--ana-koyuda); }
.koyu-bolum .kart-link { color: var(--ana-koyuda); }

/* KPI kartı */
.kpi { position: relative; }
.kpi-ust { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-etiket { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--soluk); }
.kpi-deger { font-size: 40px; font-weight: 700; color: var(--yazi); line-height: 1; margin: 14px 0 6px; }
.kpi-deger small { font-size: 16px; font-weight: 500; color: var(--soluk); margin-left: 4px; }
.kpi .simge { margin: 0; }
.kpi .simge svg { width: 26px; height: 26px; }

/* ---------- Izgaralar ---------- */
.izgara { display: grid; gap: 24px; }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.iki-kolon.genis-sol { grid-template-columns: 1.2fr .8fr; }

/* ---------- Liste / adımlar ---------- */
.tik-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tik-liste li { position: relative; padding-left: 30px; color: var(--yazi-2); }
.tik-liste li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a62b0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/18px no-repeat; }
.koyu-bolum .tik-liste li { color: #d5dce5; }
.koyu-bolum .tik-liste li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb2ea' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.adimlar { counter-reset: adim; display: grid; gap: 16px; }
.adim { counter-increment: adim; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; align-content: start; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-2); padding: 24px; box-shadow: var(--golge); }
.adim::before { content: counter(adim); font: 700 18px/44px var(--yazi-tipi); text-align: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ana); color: var(--ana); }
.adim h3 { margin-bottom: 4px; } .adim p { margin: 0; color: var(--soluk); font-size: 15px; }

/* ---------- Görsel çerçeveleri (pencere düğmesi YOK) ---------- */
.gorsel-kart { border-radius: var(--r-2); overflow: hidden; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-2); }
.gorsel-kart img, .gorsel-kart video { width: 100%; height: auto; }
.pencere { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.hero .pencere { border-color: #d5dde8; box-shadow: 0 18px 44px rgba(16,40,80,.16); }
.koyu-bolum .pencere { border-color: rgba(255,255,255,.12); }
.hero .btn-cam { color: var(--yazi); border-color: var(--yazi); }
.hero .btn-cam:hover { background: var(--yazi); color: #fff; }
.pencere-ust { display: none; }

/* ---------- Etiket bulutu (hizmet bağlantıları) ---------- */
.etiket-bulutu { display: flex; flex-wrap: wrap; gap: 10px; }
.etiket-bulutu a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid #c9ced5; color: var(--yazi); font-size: 14.5px; font-weight: 600; transition: border-color .2s, color .2s, background .2s; }
.etiket-bulutu a:hover { border-color: var(--ana); color: var(--ana); }

/* ---------- Çağrı (CTA) bandı ---------- */
.cagri { border-radius: var(--r-3); background: var(--koyu); padding: 56px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; color: #c3ccd7; position: relative; overflow: hidden; }
.cagri h2 { color: #fff; margin-bottom: 10px; }
.cagri p { margin: 0; color: #c3ccd7; font-size: 17px; }
.iletisim-satiri { display: grid; gap: 0; }
.iletisim-satiri a, .iletisim-satiri div { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.iletisim-satiri a:first-child, .iletisim-satiri div:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.iletisim-satiri small { display: block; font-size: 12.5px; font-weight: 500; color: #aab5c3; }
.iletisim-satiri svg { width: 22px; height: 22px; color: var(--ana-koyuda); flex: none; }

/* ---------- Form ---------- */
.form { display: grid; gap: 16px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alan label { display: block; font-size: 14px; font-weight: 600; color: var(--yazi); margin-bottom: 6px; }
.alan input, .alan select, .alan textarea { width: 100%; font: 400 15px/1.4 var(--yazi-tipi); color: var(--yazi); background: #fff; border: 1px solid #c9ced5; border-radius: 6px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.alan textarea { min-height: 130px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(26,98,176,.15); }
.form-not { font-size: 13px; color: var(--soluk); }
.form-durum { padding: 12px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.form-durum.ok { background: var(--yesil-acik); color: var(--yesil); }
.form-durum.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }

/* ---------- Tablo ---------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r-2); background: #fff; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tablo th { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--yazi); padding: 14px 18px; border-bottom: 2px solid var(--cizgi); background: var(--zemin-2); }
.tablo td { padding: 14px 18px; border-bottom: 1px solid var(--cizgi-2); color: var(--yazi-2); }
.tablo tr:last-child td { border-bottom: 0; }

/* ---------- SSS (details) ---------- */
.sss { display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.sss details { background: transparent; border-bottom: 1px solid var(--cizgi); padding: 2px 4px; }
.sss summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 17px; color: var(--yazi); display: flex; justify-content: space-between; gap: 16px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; font: 400 26px/1 var(--yazi-tipi); color: var(--ana); }
.sss details[open] summary::after { content: '−'; }
.sss details p { color: var(--yazi-2); padding-bottom: 20px; margin: 0; max-width: 860px; }
.koyu-bolum .sss, .koyu-bolum .sss details { border-color: rgba(255,255,255,.14); }
.koyu-bolum .sss summary { color: #fff; }
.koyu-bolum .sss details p { color: #c3ccd7; }

/* ---------- Blog: kart listesi ---------- */
.yazi-kart { display: flex; flex-direction: column; height: 100%; }
.yazi-kart .yazi-ust { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--soluk); }
.yazi-kart h3 { font-size: 1.15rem; }
.yazi-kart p { flex: 1; }

/* ---------- Blog: makale gövdesi ---------- */
.makale-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; padding: 56px 0 96px; }
.makale { background: #fff; padding: 0; }
.makale > :first-child { margin-top: 0; }
.makale p, .makale li { font-size: 17.5px; line-height: 1.75; color: var(--yazi-2); }
.makale h2 { font-size: 1.65rem; margin: 2em 0 .6em; scroll-margin-top: 90px; }
.makale h3 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.makale ul, .makale ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.makale li { margin: .35em 0; }
.makale li::marker { color: var(--ana); }
.makale a { text-decoration: underline; text-decoration-color: var(--ana-cizgi); text-underline-offset: 3px; }
.makale blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ana); color: var(--yazi); font-size: 19px; font-weight: 500; }
.makale blockquote p { color: inherit; margin: 0; font-size: inherit; }
.makale code { font-family: var(--kod); font-size: .86em; background: var(--zemin-2); padding: .15em .4em; border-radius: 4px; color: var(--yazi); }
.makale pre { font-family: var(--kod); font-size: 14px; line-height: 1.6; background: #111820; color: #e6e9ed; padding: 18px 20px; border-radius: 8px; overflow-x: auto; }
.makale pre code { background: none; color: inherit; padding: 0; }
.makale table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.makale th, .makale td { border: 1px solid var(--cizgi); padding: 10px 12px; text-align: left; }
.makale th { background: var(--zemin-2); color: var(--yazi); }
.makale img { border-radius: 8px; margin: 1.4em 0; }
.bilgi-kutu { margin: 1.6em 0; padding: 20px 22px; border-radius: 0 8px 8px 0; border-left: 4px solid var(--ana); background: var(--ana-acik); }
.bilgi-kutu b { color: var(--ana-yazi); }
.yan-kutu { position: sticky; top: 96px; display: grid; gap: 16px; }
.icindekiler { background: var(--zemin-2); border-radius: var(--r-2); padding: 22px; }
.icindekiler h4 { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--yazi); margin-bottom: 10px; }
.icindekiler ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.icindekiler a { display: block; padding: 6px 10px; border-left: 2px solid transparent; font-size: 14px; color: var(--yazi-2); }
.icindekiler a:hover, .icindekiler a.aktif { border-left-color: var(--ana); color: var(--ana); }
.okuma-cubugu { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ana); z-index: 60; }
.yazar { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--yazi-2); }
.yazar-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ana); display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--yazi-tipi); color: #fff; }

/* ---------- Alt bilgi (siyah) ---------- */
.alt { background: var(--siyah); color: #c8cdd3; padding: 64px 0 0; margin-top: 96px; }
.alt-ust { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; }
.alt .logo img { height: 40px; width: auto; margin-bottom: 18px; }
.alt p { font-size: 15px; line-height: 1.7; max-width: 380px; color: #c8cdd3; }
.alt h4, .alt .alt-baslik { display: block; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 16px; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alt ul a { color: #fff; font-size: 15px; }
.alt ul a:hover { color: var(--ana-koyuda); }
.alt-iletisim { display: grid; gap: 6px; margin-top: 16px; font-size: 15px; }
.alt-iletisim a, .alt-iletisim span { color: #fff; }
.alt-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; color: #9aa1aa; }
.alt-alt a { color: #c8cdd3; } .alt-alt a:hover { color: #fff; }
.alt-alt .durum { display: none; }

/* ---------- WhatsApp yüzen düğme ---------- */
.wa-dugme { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s; }
.wa-dugme:hover { transform: scale(1.05); color: #fff; }
.wa-dugme svg { width: 28px; height: 28px; }

/* ---------- Görünme animasyonu ---------- */
.gorun { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.gorun.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gorun { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  .ust nav { position: fixed; inset: 72px 0 auto 0; background: #fff; border-bottom: 1px solid var(--cizgi); box-shadow: var(--golge-2); padding: 8px 16px 18px; display: none; max-height: calc(100vh - 72px); overflow-y: auto; }
  .ust.acik nav { display: block; }
  .ust nav ul { flex-direction: column; gap: 0; }
  .ust nav a { padding: 14px 6px; font-size: 16px; border-bottom: 1px solid var(--cizgi-2); }
  .ust nav a[aria-current="page"] { border-bottom-color: var(--cizgi-2); }
  .ust nav .yalniz-mobil { display: block; }
  .menu-dugme { display: inline-flex; }
  .ust .eylem .btn { display: none; }
  .ust .kap { justify-content: space-between; }
}
@media (max-width: 1080px) {
  .hero-izgara, .iki-kolon, .iki-kolon.genis-sol, .cagri { grid-template-columns: 1fr; }
  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .makale-izgara { grid-template-columns: minmax(0, 1fr); }
  .yan-kutu { position: static; }
  .alt-ust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .kap { padding: 0 16px; }
  .ust-serit .serit-sol { display: none; }
  .ust-serit .kap { justify-content: center; }
  .bolum { padding: 64px 0; }
  .hero-alan { border-radius: 0 0 50% 50% / 0 0 28px 28px; }
  .hero { padding: 48px 0 72px; }
  .hero-kucuk { padding: 40px 0 64px; }
  .hero .hero-ozet { font-size: 17px; }
  .cam-istatistik { min-width: 0; padding-right: 18px; margin-right: 18px; }
  .cam-istatistik b { font-size: 24px; }
  .izgara-2, .izgara-3, .izgara-4, .form-satir { grid-template-columns: 1fr; }
  .cagri { padding: 36px 22px; }
  .makale p, .makale li { font-size: 16.5px; }
  .alt-ust { grid-template-columns: 1fr; gap: 32px; }
  .kpi-deger { font-size: 34px; }
  .bolum-baslik p { font-size: 16.5px; }
  .btn-buyuk { height: 50px; padding: 0 24px; font-size: 14px; }
}

/* ---------- Görsel büyütme (rvz.js) ---------- */
img.buyutulebilir { cursor: zoom-in; }
.buyutec { position: fixed; inset: 0; z-index: 100; background: rgba(17,26,39,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 24px; }
.buyutec[hidden] { display: none; }
.buyutec img { max-width: min(1400px, 100%); max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.buyutec-yazi { color: #e3e8ef; font-size: 15px; margin: 14px 0 0; text-align: center; max-width: 900px; }
.buyutec-kapat { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--yazi); font: 400 30px/44px var(--yazi-tipi); cursor: pointer; }
.buyutec-kapat:hover { background: var(--ana-acik); }
html.buyutec-acik { overflow: hidden; }

/* Koyu (lacivert) bölümde sayfa başı bileşenleri kullanılırsa açık renkte kalsın */
.koyu-bolum .cam-istatistik, .cagri .cam-istatistik { border-right-color: rgba(255,255,255,.22); }
.koyu-bolum .cam-istatistik b, .cagri .cam-istatistik b { color: #fff; }
.koyu-bolum .cam-istatistik span, .cagri .cam-istatistik span { color: #c3ccd7; }
.koyu-bolum .hero-ozet, .cagri .hero-ozet { color: #d5dce5; }
.koyu-bolum .kirinti, .koyu-bolum .kirinti a { color: #c3ccd7; }
.koyu-bolum .cam-kutu { background: var(--koyu-2); border-color: rgba(255,255,255,.12); box-shadow: none; }

/* ---------- Üzerine gelme efektleri (sade, kurumsal) ---------- */
a.kart, .kart.etkilesimli { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.kart::after, .kart.etkilesimli::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ana); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
a.kart:hover, .kart.etkilesimli:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,40,80,.14); border-color: var(--ana-cizgi); }
a.kart:hover::after, .kart.etkilesimli:hover::after { transform: scaleX(1); }
a.kart h3 { transition: color .2s; }
a.kart:hover h3 { color: var(--ana); }
.kart-link { transition: gap .2s ease, color .2s; }
a.kart:hover .kart-link, .kart-link:hover { gap: 14px; }
a.kart .simge { transition: transform .25s ease; }
a.kart:hover .simge { transform: translateY(-2px); }
/* Kart içinde fotoğraf: <div class="kart-foto"><img></div> */
.kart-foto { margin: -28px -28px 22px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--zemin-2); }
.kart-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.kart:hover .kart-foto img { transform: scale(1.05); }
.koyu-bolum a.kart:hover { box-shadow: 0 16px 36px rgba(0,0,0,.3); border-color: rgba(255,255,255,.25); }
.koyu-bolum a.kart::after { background: var(--ana-koyuda); }
.koyu-bolum a.kart:hover h3 { color: #fff; }
/* Hap bağlantılar */
.etiket-bulutu a:hover { background: var(--ana); border-color: var(--ana); color: #fff; }
.koyu-bolum .etiket-bulutu a { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.koyu-bolum .etiket-bulutu a:hover { background: #fff; border-color: #fff; color: var(--yazi); }
/* Düğmeler */
.btn { transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,40,80,.18); }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
/* Büyütülebilir ekran görüntüleri */
.pencere, .gorsel-kart { transition: box-shadow .25s ease, transform .25s ease; }
.pencere:has(img.buyutulebilir):hover, .gorsel-kart:has(img.buyutulebilir):hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(16,40,80,.22); }
/* Alt bilgi ve menü bağlantıları */
.alt ul a { transition: color .2s, padding-left .2s; }
.alt ul a:hover { padding-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  a.kart, .kart.etkilesimli, .btn, .pencere, .gorsel-kart, .kart-foto img, .btn svg { transition: none !important; }
  a.kart:hover, .btn:hover, .pencere:hover, .gorsel-kart:hover { transform: none !important; }
}

/* Alt bilgi: marka + 4 sütun, her sütunda iki alt başlık grubu */
.alt-ust { grid-template-columns: 1.35fr repeat(4, 1fr); gap: 36px; }
.alt ul + .alt-baslik { margin-top: 28px; }
.alt .alt-baslik a { color: #fff; }
.alt .alt-baslik a:hover { color: var(--ana-koyuda); }
.alt ul a { font-size: 14.5px; }
@media (max-width: 1080px) { .alt-ust { grid-template-columns: 1fr 1fr; } .alt-marka { grid-column: 1 / -1; } }
@media (max-width: 560px) { .alt-ust { grid-template-columns: 1fr; } }

/* Telefonda üst şerit tek satır: yalnız telefon + WhatsApp */
@media (max-width: 760px) {
  .ust-serit a { white-space: nowrap; }
  .ust-serit a[href^="mailto:"] { display: none; }
  .ust-serit a[href^="tel:"] { border-left: 0; }
}

/* Blog kartı bağlantı olarak kullanılınca dikey düzen korunur */
a.yazi-kart { display: flex; flex-direction: column; }
/* İletişim satırları açık zeminde (koyu bölüm/çağrı dışı) */
.iletisim-satiri.acik a, .iletisim-satiri.acik div { color: var(--yazi); border-color: var(--cizgi); }
.iletisim-satiri.acik small { color: var(--soluk); }
.iletisim-satiri.acik svg { color: var(--ana); }

/* Koyu bölümde KPI kartı okunur kalsın */
.koyu-bolum .kpi-deger { color: #fff; }
.koyu-bolum .kpi-deger small, .koyu-bolum .kpi-etiket { color: #c3ccd7; }
/* Çağrı bandı içindeki beyaz kart/formlarda düğme mavi kalsın */
.cagri .kart .btn-ana, .cagri form .btn-ana, .cagri .form .btn-ana { background: var(--ana); color: #fff; }
.cagri .kart .btn-ana:hover, .cagri form .btn-ana:hover, .cagri .form .btn-ana:hover { background: var(--ana-koyu); color: #fff; }
/* Dikey düzenli kartlarda ikon solda kalsın */
.kart > .simge { align-self: flex-start; }
/* Telefonda sayfa başı rakamları ızgarada */
@media (max-width: 560px) {
  .cam-istatistikler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .cam-istatistik { border-right: 0; margin-right: 0; padding-right: 12px; }
}

/* Eşit genişlikte rakam yalnız sayı gösteren yerlerde (gövdede tireyi genişletiyordu) */
.kpi-deger, .cam-istatistik b, .tablo td, .mono { font-variant-numeric: tabular-nums; }

/* Sayfa başındaki fotoğraf kartı: oran sabit, yüklenene kadar gri yer tutucu */
.hero .gorsel-kart { aspect-ratio: 3 / 2; background: var(--zemin-2); }
.hero .gorsel-kart img { width: 100%; height: 100%; object-fit: cover; }

/* Metin içi bağlantılar yalnız renkle ayrılmasın (erişilebilirlik) */
.bolum p a:not(.btn), .bolum li a:not(.btn), .kart p a { text-decoration: underline; text-decoration-color: var(--ana-cizgi); text-underline-offset: 3px; }
.bolum p a:not(.btn):hover, .bolum li a:not(.btn):hover, .kart p a:hover { text-decoration-color: currentColor; }
/* İki kolonlu sayfa başında uzun başlıklar 4 satıra çıkmasın */
.hero-kucuk.hero-izgara h1 { font-size: clamp(1.8rem, 2.7vw, 2.4rem); }

/* Bütün kartlarda üzerine gelme efekti (bağlantı olmayan bilgi kartları dahil; formlu kartlar hariç) */
.kart { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.kart:not(:has(form, input, textarea, select)):hover { transform: translateY(-4px); border-color: var(--ana-cizgi); box-shadow: 0 16px 36px rgba(16,40,80,.14), inset 0 -3px 0 var(--ana); }
.kart h3 { transition: color .2s; }
.kart:not(:has(form, input, textarea, select)):hover h3 { color: var(--ana); }
.kart .simge { transition: transform .25s ease; }
.kart:hover .simge { transform: translateY(-2px) scale(1.06); }
.koyu-bolum .kart:not(:has(form, input, textarea, select)):hover { box-shadow: 0 16px 36px rgba(0,0,0,.3), inset 0 -3px 0 var(--ana-koyuda); border-color: rgba(255,255,255,.25); }
.koyu-bolum .kart:hover h3 { color: #fff; }
.yan-kutu .kart:hover, .makale .kart:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .kart, .kart .simge { transition: none; } .kart:hover, .kart:hover .simge { transform: none !important; } }

/* Kart olmayan kutularda da aynı üzerine gelme efekti (tarama ile bulunanlar + süreç adımları) */
.adim, .hz-istat, .ai-dugum, .by-iletisim { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.adim:hover, .hz-istat:hover, .ai-dugum:hover, .by-iletisim:hover { transform: translateY(-4px); border-color: var(--ana-cizgi); box-shadow: 0 16px 36px rgba(16,40,80,.14), inset 0 -3px 0 var(--ana); }
.adim:hover h3 { color: var(--ana); }
.adim::before { transition: background .25s, color .25s; }
.adim:hover::before { background: var(--ana); color: #fff; }
.ai-dugum.ai-ana:hover { box-shadow: 0 16px 36px rgba(16,40,80,.22); }
@media (prefers-reduced-motion: reduce) { .adim:hover, .hz-istat:hover, .ai-dugum:hover, .by-iletisim:hover { transform: none; } }
/* Makale görselleri oranını korusun */
.makale img { height: auto; }