/*
 * elemanarayan.com.tr — site stili (15.09.2026, yeniden yazildi)
 *
 * ⚠️ Derleme adimi YOK. Sunucuda Node 18 kurulu, iskeletin package.json'i
 * Vite 8 istiyor (Node 20.19+ sarti). Bu dosya dogrudan servis ediliyor.
 *
 * Renkler mevcut markanin ailesinde ama DOYGUNLASTIRILDI: eski #446084 soluk
 * mavi-gri ve #C05530 kiremit, ekranda cansiz duruyordu. Lacivert derinlestirildi,
 * kiremit canli turuncuya cekildi, "yayinda" durumu icin ayri bir yesil eklendi.
 */

/* ----------------------------------------------------------------- tema
 *
 * Yazi tipi (Plus Jakarta Sans) layout'tan <link> ile yukleniyor; buraya
 * @font-face yazilmadi cunku Google'in woff2 adresleri surumlendikce degisiyor
 * ve sabitlenen adres bir gun sessizce 404'e duserdi. Font inmezse sistem
 * yazi tipine duser, sayfa yine okunur.
 */

:root {
    /* Marka — doygunlastirilmis */
    --lacivert-950: #081221;
    --lacivert-900: #0d1c31;
    --lacivert-800: #142943;
    --lacivert-700: #1b3a5c;
    --lacivert-600: #24507c;
    --lacivert-500: #3268a0;

    --alev-600: #d9430f;
    --alev-500: #f2551c;
    --alev-400: #ff6b35;
    --alev-100: #ffe8de;

    --yesil-600: #047857;
    --yesil-500: #059669;
    --yesil-100: #d6f5e6;

    /* Notr */
    --zemin: #f6f8fb;
    --yuzey: #ffffff;
    --yuzey-2: #f1f5f9;
    --cizgi: #e2e8f0;
    --cizgi-koyu: #cbd5e1;
    --metin: #0f1b2d;
    --metin-orta: #475569;
    --metin-soluk: #708096;

    --golge-xs: 0 1px 2px rgba(10, 22, 40, .05);
    --golge-sm: 0 1px 3px rgba(10, 22, 40, .07), 0 1px 2px rgba(10, 22, 40, .04);
    --golge-md: 0 4px 6px -1px rgba(10, 22, 40, .07), 0 2px 4px -2px rgba(10, 22, 40, .05);
    --golge-lg: 0 12px 24px -6px rgba(10, 22, 40, .12), 0 4px 8px -4px rgba(10, 22, 40, .06);
    --golge-xl: 0 24px 48px -12px rgba(10, 22, 40, .18);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-tam: 999px;

    --kap: 1240px;
    --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Koyu mod: sistem tercihini izler, ayri bir dugme yok.
   Ziyaretcinin cihazi zaten karar vermis durumda. */
@media (prefers-color-scheme: dark) {
    :root {
        --zemin: #070d17;
        --yuzey: #0e1726;
        --yuzey-2: #141f31;
        --cizgi: #1e2b40;
        --cizgi-koyu: #2b3b54;
        --metin: #e8eef7;
        --metin-orta: #a3b2c7;
        --metin-soluk: #7b8ba3;

        --alev-100: #3d1608;
        --yesil-100: #06291d;

        --golge-sm: 0 1px 3px rgba(0, 0, 0, .4);
        --golge-md: 0 4px 8px -2px rgba(0, 0, 0, .45);
        --golge-lg: 0 12px 28px -8px rgba(0, 0, 0, .55);
        --golge-xl: 0 24px 56px -16px rgba(0, 0, 0, .7);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.022em;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

a {
    color: var(--lacivert-600);
    text-decoration: none;
    transition: color var(--gecis);
}
a:hover { color: var(--alev-500); }

@media (prefers-color-scheme: dark) {
    a { color: #6ea8e8; }
}

::selection { background: var(--alev-400); color: #fff; }

:focus-visible {
    outline: 2px solid var(--alev-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 20px; }

.atla {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--lacivert-800); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0;
}
.atla:focus { left: 0; }

/* -------------------------------------------------------------- ust bar */

.ust {
    background: color-mix(in srgb, var(--yuzey) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--cizgi);
    position: sticky; top: 0; z-index: 50;
}

.ust-ic { display: flex; align-items: center; gap: 18px; min-height: 76px; flex-wrap: wrap; }

.marka { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.marka:hover { text-decoration: none; }
.marka-ad {
    font-size: 1.5rem; font-weight: 500; color: var(--metin);
    letter-spacing: -.035em;
}
.marka-ad strong {
    font-weight: 800;
    background: linear-gradient(135deg, var(--alev-400), var(--alev-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.marka-alt { font-size: .74rem; color: var(--metin-soluk); font-weight: 500; }

.ana-menu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ana-menu > a {
    padding: 9px 14px; border-radius: var(--r-sm); font-size: .95rem; font-weight: 500;
    color: var(--metin-orta); white-space: nowrap;
    transition: background var(--gecis), color var(--gecis);
}
.ana-menu > a:hover { background: var(--yuzey-2); color: var(--metin); }
.ana-menu > a.etkin { color: var(--metin); font-weight: 700; }

.menu-dugme { display: none; }

.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--r-sm);
    font-weight: 700; font-size: .95rem; font-family: inherit;
    border: 1px solid transparent; cursor: pointer; text-align: center;
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.dugme:hover { text-decoration: none; transform: translateY(-1px); }
.dugme:active { transform: translateY(0); }

.dugme-vurgu {
    background: linear-gradient(135deg, var(--alev-400), var(--alev-600));
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(242, 85, 28, .5);
}
.dugme-vurgu:hover { box-shadow: 0 8px 22px -6px rgba(242, 85, 28, .6); }

.dugme-ana { background: var(--lacivert-700); color: #fff !important; box-shadow: var(--golge-md); }
.dugme-ana:hover { background: var(--lacivert-800); }

.dugme-cizgi {
    background: var(--yuzey); border-color: var(--cizgi-koyu); color: var(--metin) !important;
}
.dugme-cizgi:hover { border-color: var(--lacivert-600); color: var(--lacivert-600) !important; }

/* ------------------------------------------------------------- kirinti */

.kirinti { border-bottom: 1px solid var(--cizgi); font-size: .85rem; background: var(--yuzey); }
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0; }
.kirinti li + li::before { content: "/"; margin-right: 8px; color: var(--cizgi-koyu); }
.kirinti span { color: var(--metin-soluk); }
.kirinti a { color: var(--metin-orta); }

/* --------------------------------------------------------------- bolum */

.bolum { padding: 44px 0; }
.bolum-baslik {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.bolum-baslik h2 { margin: 0; }
.bolum-baslik a { font-size: .92rem; font-weight: 600; }

/* ---------------------------------------------------------------- hero */

.hero {
    position: relative;
    background: var(--lacivert-900);
    color: #fff;
    padding: 72px 0 64px;
    overflow: hidden;
    isolation: isolate;
}

/* Isik lekeleri: tek renk zemin duz ve olu duruyordu */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}
.hero::before {
    width: 560px; height: 560px;
    background: radial-gradient(circle, var(--lacivert-500), transparent 70%);
    top: -260px; right: -140px;
}
.hero::after {
    width: 460px; height: 460px;
    background: radial-gradient(circle, var(--alev-600), transparent 70%);
    bottom: -280px; left: -120px;
    opacity: .38;
}

.hero h1 { color: #fff; margin-bottom: 14px; max-width: 18ch; }
.hero p { color: rgba(226, 236, 248, .82); max-width: 58ch; font-size: 1.05rem; }

.hero-rozet {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 6px 14px; border-radius: var(--r-tam);
    font-size: .82rem; font-weight: 600; color: #fff;
    margin-bottom: 18px;
}
.hero-rozet::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--alev-400);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, .3);
}

.arama {
    display: flex; gap: 10px; flex-wrap: wrap;
    background: var(--yuzey); padding: 12px; border-radius: var(--r-lg);
    box-shadow: var(--golge-xl); margin-top: 28px; max-width: 880px;
}
.arama input, .arama select {
    flex: 1 1 200px; min-width: 0; padding: 14px 16px; font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--cizgi); border-radius: var(--r-sm);
    background: var(--yuzey); color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.arama input:focus, .arama select:focus {
    outline: none; border-color: var(--lacivert-500);
    box-shadow: 0 0 0 3px rgba(50, 104, 160, .16);
}
.arama button { flex: 0 0 auto; }

.hero-sayilar { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 34px; }
.hero-sayilar div { font-size: .85rem; color: rgba(226, 236, 248, .68); font-weight: 500; }
.hero-sayilar strong {
    display: block; font-size: 2.1rem; color: #fff; line-height: 1.1;
    letter-spacing: -.03em; font-weight: 800;
}

/* ---------------------------------------------------------------- kart */

.izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.kart {
    position: relative;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-md); padding: 20px; box-shadow: var(--golge-sm);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kart:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-lg);
    border-color: var(--cizgi-koyu);
}

.kart h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.kart h3 a { color: var(--metin); }
.kart h3 a:hover { color: var(--lacivert-600); }

/* Kartin tamami tiklanabilir olsun ama baglanti metni tek kalsin */
.kart h3 a::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
}

.kart-satir {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    font-size: .86rem; color: var(--metin-orta);
}
.kart-satir span { display: inline-flex; align-items: center; gap: 5px; }
.kart-ozet { font-size: .92rem; color: var(--metin-orta); margin: 0; line-height: 1.6; }
.kart-alt {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cizgi);
}
.kart-alt a { position: relative; z-index: 2; font-weight: 600; }

.rozet {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-tam);
    font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.rozet-acil { background: var(--alev-100); color: var(--alev-600); }
.rozet-vitrin {
    background: linear-gradient(135deg, var(--lacivert-700), var(--lacivert-500));
    color: #fff;
}
.rozet-canli { background: var(--yesil-100); color: var(--yesil-600); }
.rozet-canli::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--yesil-500);
}
/* ⚠️ Arsiv rozeti BILEREK silik: 276 ilanin tamami suresi dolmus durumda,
   her kartta kirmizi bir etiket olsaydi site olu gorunurdu. Bilgi duruyor,
   gorsel agirligi yok. */
.rozet-arsiv {
    background: transparent; color: var(--metin-soluk);
    border: 1px solid var(--cizgi-koyu); font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .rozet-acil { color: var(--alev-400); }
    .rozet-canli { color: #34d399; }
}

/* -------------------------------------------------------------- etiket */

.etiketler { display: flex; flex-wrap: wrap; gap: 10px; }
.etiket {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    padding: 9px 15px; border-radius: var(--r-tam);
    font-size: .92rem; font-weight: 500; color: var(--metin);
    box-shadow: var(--golge-xs);
    transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.etiket:hover {
    border-color: var(--lacivert-500); color: var(--lacivert-600);
    text-decoration: none; transform: translateY(-2px); box-shadow: var(--golge-md);
}
.etiket b {
    color: var(--metin-soluk); font-weight: 700; font-size: .78rem;
    background: var(--yuzey-2); padding: 1px 7px; border-radius: var(--r-tam);
}

/* ----------------------------------------------------------- iki sutun */

.ikili { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.yan { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }

.kutu {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-md); padding: 20px; box-shadow: var(--golge-sm);
}
.kutu h2, .kutu h3 { font-size: 1.02rem; margin-bottom: 12px; }
.kutu ul { margin: 0; padding-left: 20px; }
.kutu ul li { margin-bottom: .4em; }

/* ----------------------------------------------------------- ilan bas */

.ilan-bas {
    background: linear-gradient(180deg, var(--yuzey), var(--zemin));
    border-bottom: 1px solid var(--cizgi);
    padding: 34px 0 30px;
}
.ilan-bas h1 { margin-bottom: 14px; }
.ilan-kunye {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    font-size: .94rem; color: var(--metin-orta);
}

.uyari {
    padding: 15px 18px; border-radius: var(--r-md); font-size: .94rem;
    border: 1px solid; margin-bottom: 20px; line-height: 1.6;
}
.uyari-bilgi   { background: rgba(50,104,160,.08);  border-color: rgba(50,104,160,.25);  color: var(--lacivert-600); }
.uyari-dikkat  { background: rgba(242,85,28,.07);   border-color: rgba(242,85,28,.24);   color: var(--alev-600); }
.uyari-hata    { background: rgba(220,38,38,.07);   border-color: rgba(220,38,38,.25);   color: #b91c1c; }
.uyari-basari  { background: rgba(5,150,105,.08);   border-color: rgba(5,150,105,.25);   color: var(--yesil-600); }

@media (prefers-color-scheme: dark) {
    .uyari-dikkat { color: var(--alev-400); }
    .uyari-basari { color: #34d399; }
    .uyari-hata { color: #f87171; }
    .uyari-bilgi { color: #6ea8e8; }
}

.govde {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-md); padding: 28px; box-shadow: var(--golge-sm);
    font-size: 1.02rem;
}
.govde h2 { font-size: 1.2rem; margin-top: 1.5em; }
.govde h2:first-child { margin-top: 0; }
.govde ul, .govde ol { padding-left: 22px; }
.govde li { margin-bottom: .45em; }
.govde > p:last-child { margin-bottom: 0; }

/* Telefon kutusu — sayfanin en onemli ogesi */
.iletisim-kutu {
    background: linear-gradient(160deg, var(--lacivert-800), var(--lacivert-950));
    border-color: var(--lacivert-700);
    color: #fff;
    box-shadow: var(--golge-lg);
}
.iletisim-kutu h2 { color: #fff; }
.iletisim-kutu .kucuk, .iletisim-kutu .soluk { color: rgba(226, 236, 248, .72); }
.iletisim-kutu a:not(.telefon-dugme) { color: #8fc0f0; }

.telefon-dugme {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px; font-size: 1.2rem; font-weight: 800;
    background: linear-gradient(135deg, var(--yesil-500), var(--yesil-600));
    color: #fff !important; border-radius: var(--r-sm);
    letter-spacing: .01em;
    box-shadow: 0 6px 18px -6px rgba(5, 150, 105, .6);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.telefon-dugme:hover {
    text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px rgba(5, 150, 105, .7);
}
.telefon-not { font-size: .84rem; margin: 10px 0 0; text-align: center; }

/* ------------------------------------------------------------ whatsapp */

/* Yuzen dugme — sag altta, telefonda bas parmagin ulastigi yerde */
.wa-yuzen {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 60;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px -4px rgba(37, 211, 102, .55), var(--golge-md);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.wa-yuzen:hover {
    color: #fff; transform: scale(1.07);
    box-shadow: 0 10px 28px -6px rgba(37, 211, 102, .7);
}
.wa-yuzen:active { transform: scale(.98); }

/* Dikkat cekmeyen, yavas nabiz. Hareketi kapatan kullaniciya gosterilmez. */
@media (prefers-reduced-motion: no-preference) {
    .wa-yuzen::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: 50%;
        border: 2px solid #25d366;
        animation: wa-nabiz 2.6s ease-out infinite;
    }
}

@keyframes wa-nabiz {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* Ilan sayfasindaki isveren WhatsApp dugmesi */
.wa-dugme {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin-top: 10px; padding: 13px;
    font-size: 1rem; font-weight: 700;
    background: #25d366; color: #fff !important;
    border-radius: var(--r-sm);
    box-shadow: 0 5px 16px -6px rgba(37, 211, 102, .6);
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.wa-dugme:hover {
    background: #1fb855; text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 9px 24px -8px rgba(37, 211, 102, .7);
}

@media (max-width: 760px) {
    /* Telefonda yuzen dugme sayfalama/alt bilgiyle cakisabiliyor */
    .wa-yuzen { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* ---------------------------------------------------------------- form */

.form-satir { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.alan { flex: 1 1 250px; display: flex; flex-direction: column; gap: 7px; }
.alan label { font-weight: 700; font-size: .9rem; }
.alan .ipucu { font-size: .83rem; color: var(--metin-soluk); font-weight: 400; line-height: 1.5; }
.alan input, .alan select, .alan textarea {
    padding: 13px 14px; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--cizgi); border-radius: var(--r-sm);
    background: var(--yuzey); color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
    outline: none; border-color: var(--lacivert-500);
    box-shadow: 0 0 0 3px rgba(50, 104, 160, .16);
}
.alan textarea { min-height: 200px; resize: vertical; line-height: 1.6; }
.alan-hata input, .alan-hata select, .alan-hata textarea { border-color: #dc2626; }
.hata-metni { color: #dc2626; font-size: .86rem; font-weight: 600; }
.onay { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.onay input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--alev-500); }

/* ------------------------------------------------------------- paketler */

.paket-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.paket { text-align: center; padding: 28px 22px; }
.paket-fiyat {
    font-size: 2.6rem; font-weight: 800; letter-spacing: -.035em;
    background: linear-gradient(135deg, var(--lacivert-600), var(--lacivert-800));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.paket-kdv { font-size: .8rem; color: var(--metin-soluk); margin-bottom: 4px; }
.paket ul { list-style: none; padding: 0; margin: 18px 0; font-size: .93rem; text-align: left; }
.paket li { padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid var(--cizgi); }
.paket li:last-child { border-bottom: 0; }
.paket li::before {
    content: "✓"; position: absolute; left: 0; top: 9px;
    color: var(--yesil-500); font-weight: 800;
}
.paket-one {
    border-color: var(--alev-400);
    box-shadow: 0 0 0 1px var(--alev-400), var(--golge-lg);
}
.paket-one .paket-fiyat {
    background: linear-gradient(135deg, var(--alev-400), var(--alev-600));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.iban {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.05rem; letter-spacing: .06em; word-break: break-all;
    background: var(--yuzey-2); padding: 10px 14px; border-radius: var(--r-sm);
    margin-top: 6px; display: inline-block;
}

/* ----------------------------------------------------------- sayfalama */

.sayfalama {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 34px; list-style: none; padding: 0;
}
.sayfalama a, .sayfalama span {
    display: inline-block; min-width: 44px; text-align: center;
    padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-sm);
    background: var(--yuzey); font-weight: 600; font-size: .92rem;
    transition: border-color var(--gecis), transform var(--gecis);
}
.sayfalama a:hover { border-color: var(--lacivert-500); transform: translateY(-1px); text-decoration: none; }
.sayfalama .etkin span {
    background: var(--lacivert-700); color: #fff; border-color: var(--lacivert-700);
}
.sayfalama .kapali span { color: var(--metin-soluk); opacity: .55; }

/* ------------------------------------------------------------------ alt */

.alt {
    background: var(--lacivert-950); color: #9fb0c6;
    margin-top: 64px; padding: 52px 0 20px; font-size: .93rem;
}
.alt a { color: #cfdcea; }
.alt a:hover { color: var(--alev-400); }
.alt h2 {
    font-size: .8rem; color: #fff; text-transform: uppercase;
    letter-spacing: .1em; font-weight: 700; margin-bottom: 14px;
}
.alt-ic { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.alt ul { list-style: none; padding: 0; margin: 0; }
.alt li { padding: 4px 0; }
.alt address { font-style: normal; line-height: 1.9; }
.alt .beyan {
    font-size: .86rem; color: #7d8ea6;
    border-left: 2px solid var(--alev-500); padding-left: 14px; margin-top: 14px;
}
.alt-son {
    border-top: 1px solid #16243a; margin-top: 36px; padding-top: 18px;
    text-align: center; color: #6b7c94;
}

/* -------------------------------------------------------------- yardimci */

.soluk { color: var(--metin-soluk); }
.kucuk { font-size: .88rem; }
.ortala { text-align: center; }
.bos-durum {
    background: var(--yuzey); border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--r-md); padding: 48px 28px; text-align: center;
    color: var(--metin-orta);
}

/* Girişte hafif yukselme: sayfa "yerlesti" hissi verir, dikkat dagitmaz */
@media (prefers-reduced-motion: no-preference) {
    .izgara > *, .etiketler > * {
        animation: belir .4s cubic-bezier(.2, .8, .3, 1) backwards;
    }
    .izgara > *:nth-child(1) { animation-delay: .02s }
    .izgara > *:nth-child(2) { animation-delay: .05s }
    .izgara > *:nth-child(3) { animation-delay: .08s }
    .izgara > *:nth-child(4) { animation-delay: .11s }
    .izgara > *:nth-child(5) { animation-delay: .14s }
    .izgara > *:nth-child(6) { animation-delay: .17s }
}

@keyframes belir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- mobil */

@media (max-width: 960px) {
    .ikili { grid-template-columns: 1fr; }
    .yan { position: static; }
}

@media (max-width: 760px) {
    .hero { padding: 48px 0 42px; }
    .hero-sayilar { gap: 26px; }
    .hero-sayilar strong { font-size: 1.7rem; }
    .bolum { padding: 32px 0; }
    .govde { padding: 20px; }

    .menu-dugme {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 46px; height: 46px; padding: 12px; cursor: pointer;
        border: 1px solid var(--cizgi); border-radius: var(--r-sm);
        background: var(--yuzey);
    }
    .menu-dugme span {
        display: block; height: 2px; background: var(--metin); border-radius: 2px;
        transition: transform var(--gecis), opacity var(--gecis);
    }
    .menu-anahtar:checked ~ .menu-dugme span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-anahtar:checked ~ .menu-dugme span:nth-child(2) { opacity: 0; }
    .menu-anahtar:checked ~ .menu-dugme span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Salt CSS acilir menu: tek bir dugme icin JS yuklemek gereksiz */
    .ana-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 14px; }
    .menu-anahtar:checked ~ .ana-menu { display: flex; }
    .ana-menu > a { padding: 13px 14px; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
    .ana-menu > a.dugme { margin-top: 12px; border-radius: var(--r-sm); border-bottom: 0; }
}