/* ==========================================================================
   Masstaş — Ana stil (caris.com.tr düzeni referans alınarak)
   Bootstrap YOK. Tamamen özel.
   ========================================================================== */

:root {
    --siyah:    #0d0d0d;
    --koyu:     #1a1a1a;
    --metin:    #232323;
    --metin-2:  #6b6b6b;
    --cizgi:    #e6e6e6;
    --zemin-2:  #f4f2ef;
    --accent:   #e8532b;   /* birincil / vurgu — Ayarlar → Görsel & Tasarım */
    --link:       #e8532b; /* metin içi bağlantı */
    --link-hover: #c8431f;
    --kapsayici: 1360px;
    --font: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* overflow-x: clip — yatay taşmayı keser ama (hidden'ın aksine) kaydırma
   kabı oluşturmaz, böylece position: sticky header çalışmaya devam eder. */
body { margin: 0; font-family: var(--font); color: var(--metin); background: #fff; line-height: 1.65; font-size: 16px; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
button { font-family: inherit; cursor: pointer; }
.kapsayici { width: 100%; max-width: var(--kapsayici); margin: 0 auto; padding: 0 32px; }

/* --- Butonlar --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 30px; font-weight: 500; font-size: 14px; letter-spacing: .3px;
    border: 1px solid transparent; border-radius: 2px; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-dolu { background: var(--siyah); color: #fff; border-color: var(--siyah); }
.btn-dolu:hover { background: #fff; color: var(--siyah); }
.btn-cizgi { border-color: #fff; color: #fff; background: transparent; }
.btn-cizgi:hover { background: #fff; color: var(--siyah); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { filter: brightness(1.08); }

/* ============================ HEADER ============================ */
.site-ust { position: absolute; top: 0; left: 0; right: 0; z-index: 60; padding: 22px 0 34px; transition: background .3s ease, padding .3s ease; }
/* Anasayfa (şeffaf) header: üstte koyu, aşağı doğru şeffafa sönen gradyan —
   slider görseli üzerinde logo ve menünün okunabilir kalmasını sağlar */
.site-ust:not(.kati):not(.sabit) {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--siyah) 96%, transparent) 0%,
        color-mix(in srgb, var(--siyah) 78%, transparent) 45%,
        color-mix(in srgb, var(--siyah) 38%, transparent) 78%,
        transparent 100%);
}
.site-ust.sabit { position: fixed; background: color-mix(in srgb, var(--siyah) 84%, transparent); padding: 12px 0; box-shadow: 0 4px 24px rgba(0,0,0,.25); }
/* Sabitlenirken tepeden kayarak girsin — 340px'te aniden belirmesin */
.site-ust.sabit:not(.kati) { animation: ustIn .28s ease both; }
@keyframes ustIn { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-ust.sabit:not(.kati) { animation: none; } }
/* Kapak görseli olmayan sayfalarda header şeffaf değil: akışta duran koyu şerit */
.site-ust.kati { position: sticky; background: var(--siyah); padding: 16px 0; }
.site-ust.kati.sabit { position: sticky; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
/* Şeffaf header sayfanın tepesinde durur; hero onun ALTINDAN başlar (üstten sıfır) */
.site-ust:not(.kati) ~ .site-govde .sayfa-hero:first-child,
.site-ust:not(.kati) ~ .site-govde > .sayfa-hero { margin-top: 0; }
/* min-width:0 olmadan flex öğeleri içerikten dar olamaz ve panel ekran dışına
   taşar (hamburger görünmez, arama ikonu yarım kalır). Panel hiç küçülmez,
   gerekirse logo küçülür. */
.su-ic { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-width: 0; }
.site-logo { flex: 0 1 auto; min-width: 0; }
.site-logo img { max-width: 100%; }
.su-sag { flex: 0 0 auto; }

.site-logo img { max-height: 54px; width: auto; }
.site-ust .site-logo img { filter: brightness(0) invert(1); }   /* header üzerinde beyaz logo */

/* Menü paneli — yarı saydam açık şerit; hamburger de panelin sağ ucunda (caris düzeni) */
.ana-menu {
    display: flex; align-items: stretch;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255,255,255,.14);
}
/* Panel hücreleri — menü bağlantısı, dil seçici, arama ve hamburger aynı biçimde */
.ana-menu > a,
.ana-menu > .hamburger,
.ana-menu > .su-arac,
.ana-menu > .dil-secici > .ds-mevcut {
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
    height: 64px; padding: 0 20px;
    color: #fff; font-size: 16px; font-weight: 500; letter-spacing: .4px;
    background: none; border: none; cursor: pointer;
    transition: background .2s ease; opacity: 1;
}
.ana-menu > *, .ana-menu > .dil-secici { border-left: 1px solid rgba(255,255,255,.14); }
.ana-menu > *:first-child { border-left: none; }
.ana-menu > .dil-secici { display: flex; }
.ana-menu > a:hover,
.ana-menu > .hamburger:hover,
.ana-menu > .su-arac:hover,
.ana-menu > .dil-secici:hover > .ds-mevcut { background: rgba(255,255,255,.16); }
.ana-menu > a.ev, .ana-menu > .su-arac, .ana-menu > .hamburger { padding: 0 18px; }
.ana-menu > .dil-secici > .ds-mevcut { gap: 7px; }
@media (max-width: 1500px) {
    .ana-menu > a, .ana-menu > .hamburger, .ana-menu > .su-arac,
    .ana-menu > .dil-secici > .ds-mevcut { padding: 0 14px; font-size: 13.5px; }
}
/* Masaüstünde tüm menü zaten görünür — hamburger yalnızca dar ekranda çıkar */
.ana-menu > .hamburger { display: none; }
@media (max-width: 980px) { .ana-menu > .hamburger { display: flex; } }

/* ---------- MOBİL HEADER ----------
   Dar ekranda header yalnızca logo · arama · hamburger'dan oluşur.
   Anasayfa ikonu gizlenir (logo zaten anasayfaya gider), dil seçici de
   tam ekran menünün altına taşınır. */
@media (max-width: 820px) {
    .site-ust { padding: 14px 0 18px; }
    .site-ust.sabit, .site-ust.kati { padding: 10px 0; }
    .su-ic { align-items: center; gap: 12px; }
    /* Genişlik sınırı şart: 56px yükseklikte logo ~195px geliyor ve dar
       ekranda paneli dışarı itiyordu. Dar ekranda logo orantılı küçülür. */
    .site-logo img { max-height: 56px; max-width: 168px; object-fit: contain; }

    .su-sag { gap: 10px; }
    .ana-menu > a.ev,
    .ana-menu > .dil-secici { display: none; }
    .ana-menu > .hamburger, .ana-menu > .su-arac { height: 54px; padding: 0 16px; }
    .ana-menu > .hamburger span { width: 22px; }
    /* Dokunma hedefi büyüsün diye arama ikonu masaüstündekinden geniş */
    .ana-menu > .su-arac svg { width: 24px; height: 24px; }
}
@media (max-width: 400px) {
    .site-logo img { max-width: 140px; }
    .ana-menu > .hamburger, .ana-menu > .su-arac { height: 54px; padding: 0 13px; }
    .ana-menu > .su-arac svg { width: 22px; height: 22px; }
}

/* ---------- MEGA MENÜ (Ürünlerimiz → kategoriler) ----------
   Panel header'ın altına, tam genişlikte açılır. Sütun sayısı şablonda
   kategori adedine göre hesaplanıp --mega-sutun/--mega-satir ile gelir;
   grid-auto-flow: column sayesinde kategoriler sütunlara yukarıdan aşağıya
   dizilir (7 kategori → 4 + 3). */
.mega-ac { gap: 7px; }
.mega-ok { transition: transform .22s ease; flex-shrink: 0; }
.site-ust.mega-acik .mega-ac { background: rgba(255,255,255,.16); }
.site-ust.mega-acik .mega-ok { transform: rotate(180deg); }

.mega-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: color-mix(in srgb, var(--siyah) 92%, transparent);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 44px rgba(0,0,0,.34);
    padding: 30px 0 26px; z-index: 70;
}
.mega-menu[hidden] { display: none; }
.site-ust.sabit .mega-menu { max-height: calc(100vh - 90px); overflow-y: auto; }

.mega-izgara {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--mega-satir, 4), auto);
    grid-template-columns: repeat(var(--mega-sutun, 3), minmax(0, 1fr));
    gap: 2px 30px;
}
.mega-izgara > a {
    display: block; color: #e6e6e6; font-size: 17.5px; padding: 12px 16px;
    border-radius: 3px; border-left: 2px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mega-izgara > a:hover { background: rgba(255,255,255,.07); color: #fff; border-left-color: var(--accent); }

/* caris'teki "* Yeni Ürünler >>" gibi çerçeveli vurgu bağlantısı */
.mega-tumu {
    display: inline-block; margin-top: 22px; padding: 11px 24px;
    border: 1px solid rgba(255,255,255,.32); border-radius: 2px;
    color: #fff; font-size: 15.5px; letter-spacing: .3px;
    transition: background .2s ease, border-color .2s ease;
}
.mega-tumu:hover { background: var(--accent); border-color: var(--accent); }

/* Mobilde mega menü yok; kategoriler tam ekran menüde alt liste olarak çıkar */
.tm-alt { display: none; }
@media (max-width: 980px) {
    .mega-menu { display: none !important; }
    .mega-ok { display: none; }
}

/* Menü paneli, dil seçici ve arama aynı satırda — panelin sağında */
.su-sag { display: flex; flex-direction: row; align-items: center; gap: 22px; }
.hamburger { background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; }
.hamburger span { width: 26px; height: 2px; background: #fff; display: block; transition: .25s; }
.su-araclar { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.su-arac { background: none; border: none; color: #fff; display: flex; align-items: center; opacity: .85; padding: 0; }
.su-arac:hover { opacity: 1; }

/* Dil seçici (wpplus davranışı: TR. -> açılır liste) */
.dil-secici { position: relative; }
.ds-mevcut { background: none; border: none; color: #fff; font-size: 13px; letter-spacing: .5px; display: flex; align-items: center; gap: 5px; opacity: .85; }
.ds-mevcut:hover { opacity: 1; }
.ds-liste { position: absolute; right: 0; top: calc(100% + 10px); background: var(--siyah); color: #fff; min-width: 180px; box-shadow: 0 12px 30px rgba(0,0,0,.35); border-radius: 4px; padding: 6px 0; display: none; z-index: 90; overflow: hidden; }
.dil-secici.acik .ds-liste { display: block; }
.ds-liste a { display: flex; align-items: center; gap: 11px; padding: 10px 16px; font-size: 14px; color: #e9e9e9; }
.ds-liste a .ds-kod { color: #8f8f8f; font-size: 12px; margin-left: auto; }
.ds-liste a:hover { background: #242424; color: #fff; }
.ds-liste a.aktif { background: #1c1c1c; color: #fff; }
.ds-liste a.aktif .ds-kod { color: var(--accent); }
/* Bayraklar gömülü SVG — Windows emoji bayrakları çizmediği için (kod olarak görünür) */
.bayrak { width: 26px; height: 17px; flex-shrink: 0; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.bayrak-yazi { display: grid; place-items: center; font-size: 10px; font-weight: 700; background: #333; color: #fff; }

/* Arama overlay (wpplus davranışı) */
.ara-ortu { position: fixed; inset: 0; background: color-mix(in srgb, var(--siyah) 96%, transparent); z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ara-ortu[hidden] { display: none; }
.ara-kutu { width: 100%; max-width: 640px; padding: 0 20px; }
/* Arama overlay — koyu tema */
.ara-giris {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.01); border: 1px solid rgba(255,255,255,.14);
    border-radius: 4px; padding: 4px 18px; transition: border-color .2s ease;
}
.ara-giris:focus-within { border-color: rgba(255,255,255,.4); }
.ara-giris svg { color: rgba(255,255,255,.55); flex-shrink: 0; }
.ara-giris input {
    flex: 1; border: none; outline: none; background: none; color: #fff;
    font-size: 18px; padding: 16px 0; font-family: inherit;
}
.ara-giris input::placeholder { color: rgba(255,255,255,.42); }
.ara-giris button { background: none; border: none; font-size: 26px; color: rgba(255,255,255,.55); line-height: 1; transition: color .2s ease; }
.ara-giris button:hover { color: #fff; }
.ara-sonuc {
    margin-top: 12px; background: rgba(255,255,255,.01); border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px; max-height: 52vh; overflow-y: auto;
}
.ara-ipucu { padding: 22px; text-align: center; color: rgba(255,255,255,.5); font-size: 14px; }
.ara-oge {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 15px 20px; color: #eaeaea; border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .18s ease, color .18s ease;
}
.ara-oge:last-child { border-bottom: none; }
.ara-oge:hover { background: rgba(255,255,255,.09); color: #fff; }
.ara-oge .ao-tur { font-size: 12px; letter-spacing: .6px; color: rgba(255,255,255,.45); flex-shrink: 0; }
.ara-oge:hover .ao-tur { color: var(--accent); }
.ao-tur { color: var(--metin-2); font-size: 12px; }

/* ============ TAM EKRAN MENÜ (hamburger overlay) ============ */
/* İçerik dikeyde ortalanmaz, üste dayanır (logo/kapat satırının hemen altında) */
.tam-menu { position: fixed; inset: 0; background: var(--siyah); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 120px 0 48px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.tam-menu.acik { opacity: 1; visibility: visible; }
.tm-kapat { position: absolute; top: 30px; right: 40px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; opacity: .8; }
.tm-kapat:hover { opacity: 1; }
.tm-logo { position: absolute; top: 28px; left: 32px; }
.tm-logo img { max-height: 50px; filter: brightness(0) invert(1); }
.tm-ic { display: flex; gap: 0; align-items: stretch; }
.tm-kol { padding: 0 60px; display: flex; flex-direction: column; gap: 18px; }
.tm-kol:first-child { text-align: right; border-right: 1px solid rgba(255,255,255,.25); }
.tm-kol a { color: #fff; font-size: clamp(20px, 2.4vw, 32px); font-weight: 300; opacity: .85; transition: .2s; }
.tm-kol a:hover { opacity: 1; color: var(--accent); }

/* Tam ekran menünün altındaki dil satırı — yalnızca mobilde görünür.
   NOT: bu blok .tam-menu temel tanımından SONRA gelmeli, yoksa aşağıdaki
   flex ayarları temel kural tarafından ezilir. */
.tm-dil { display: none; }
@media (max-width: 820px) {
    /* Dikey akış, üste dayalı ama yatayda ortalı; içerik uzunsa kaydırılır */
    .tam-menu { flex-direction: column; justify-content: flex-start; align-items: center; }
    .tm-dil {
        display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
        margin-top: 36px; padding: 0 20px; flex-shrink: 0;
    }
    .tm-dil a {
        display: flex; align-items: center; gap: 9px;
        padding: 9px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
        color: #cfcfcf; font-size: 14px; line-height: 1;
    }
    .tm-dil a.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* Ürünlerimiz altındaki kategori listesi — "Ürünlerimiz"e basınca açılır */
    .tm-ac { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
    .tm-ok { transition: transform .25s ease; flex-shrink: 0; }
    .tm-ac[aria-expanded="true"] .tm-ok { transform: rotate(180deg); }

    .tm-alt {
        display: grid; grid-template-rows: 0fr;          /* kapalı */
        transition: grid-template-rows .3s ease, margin .3s ease, opacity .25s ease;
        margin: 0; opacity: 0; overflow: hidden;
    }
    .tm-alt.acik { grid-template-rows: 1fr; margin: 12px 0 6px; opacity: 1; }
    .tm-alt > * { min-height: 0; }
    .tm-alt-ic { display: flex; flex-direction: column; gap: 10px; }
    .tm-kol .tm-alt a {
        font-size: 16.5px; font-weight: 400; color: #a9a9a9;
        padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16);
    }
    .tm-kol .tm-alt a:hover { color: var(--accent); border-left-color: var(--accent); }
}

/* ============================ HERO SLIDER ============================ */
.hero { position: relative; height: 100vh; min-height: 620px; background: var(--siyah); overflow: hidden; }
.hero-slaytlar { position: absolute; inset: 0; }
.hero-slayt { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background-size: cover; background-position: center; }
.hero-slayt.aktif { opacity: 1; }
.hero-gorsel { position: absolute; inset: 0; z-index: 1; }
.hero-gorsel img { width: 100%; height: 100%; object-fit: cover; }
/* Hero katman sırası: .hero-gorsel(1) < .hero-kaplama(3) < .hero-ic metin(10)
   Karartma TEK katmandır (.hero-kaplama) ve şiddeti Banner Yönetimi'ndeki
   "Karartma" değerinden gelir — 0 seçilince slayt tamamen açık kalır. */
.hero-ic { position: relative; z-index: 10; height: 100%; display: flex; align-items: center; }
/* Metin, slayt görselinin üzerinde okunaklı kalsın diye yarı saydam koyu kutuda */
.hero-metin {
    max-width: 500px; color: #fff;
    background: color-mix(in srgb, var(--siyah) 48%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    padding: 26px 30px; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .10);
}
.hero-metin h1 { font-size: clamp(23px, 3.1vw, 31px); font-weight: 600; line-height: 1.15; }
.hero-metin p { font-size: 15px; opacity: .9; max-width: 44ch; margin: 13px 0 22px; }
.hero-metin > *:last-child { margin-bottom: 0; }
/* Slider butonu — kutuyla orantılı kalsın diye genel .btn ölçüsünden küçük */
.hero-metin .btn { padding: 10px 22px; font-size: 13px; }

/* placeholder gradyan görseller (gerçek görseller gelince kaldırılacak) */
.ph1 { background-image: linear-gradient(135deg,#3a2f26,#1c1712); }
.ph2 { background-image: linear-gradient(135deg,#2b2b30,#141417); }
.ph3 { background-image: linear-gradient(135deg,#33251d,#181410); }

.hero-oklar { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 14px; }
.hero-ok { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.hero-ok:hover { background: #fff; color: var(--siyah); }
/* Mobilde oklar gizlenir — kaydırma jestiyle geçiş yapılır, noktalar kalır */
@media (max-width: 820px) { .hero-oklar { display: none; } }
.hero-noktalar { position: absolute; left: 32px; bottom: 30px; z-index: 6; display: flex; gap: 10px; }
.hero-nokta { width: 34px; height: 3px; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; }
.hero-nokta.aktif { background: #fff; }

/* WhatsApp yüzen buton */
.wa-yuzen { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .2s ease; }
.wa-yuzen:hover { transform: scale(1.08); }
.wa-yuzen svg { width: 24px; height: 24px; }

/* ============================ BÖLÜMLER ============================ */
.bolum { padding: 50px 0; }
.bolum-baslik {
    font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin: 0 0 34px;
    padding-bottom: 16px; position: relative;
}
/* Başlık altında kısa vurgu çizgisi + ince tam genişlik ayraç */
.bolum-baslik::before {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 52px; height: 3px;
    background: var(--accent); border-radius: 2px; z-index: 1;
}
.bolum-baslik::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cizgi);
}
/* Ortalanmış varyant (gri CTA gibi bölümlerde) */
.deneyim .bolum-baslik::before, .bolum-baslik.orta::before { left: 50%; transform: translateX(-50%); }
.bolum-baslik.orta { text-align: center; }

/* Proje ve Uygulamalar — 3 büyük kart */
.proje-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.proje-kart { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.proje-kart .pk-gorsel { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.proje-kart:hover .pk-gorsel { transform: scale(1.06); }
.proje-kart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent 55%); }
.pk-icerik { position: absolute; left: 22px; bottom: 20px; z-index: 3; color: #fff; }
.pk-icerik h3 { font-size: 26px; font-weight: 500; margin: 0 0 4px; }
.pk-icerik span { font-size: 13px; opacity: .9; }

/* Split tanıtım */

/* Ürün Grupları — 4 kart */
.urun-grup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ug-kart { border: 1px solid var(--cizgi); overflow: hidden; background: #fff; transition: .25s; }
.ug-kart:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.ug-gorsel { aspect-ratio: 4/3; background: var(--zemin-2); background-size: cover; background-position: center; }
.ug-alt { padding: 16px 18px; }
.ug-alt .ug-en { display: block; font-size: 18px; font-weight: 600; text-transform: uppercase; }
.ug-alt .ug-tr { color: var(--metin-2); font-size: 14px; }

/* Deneyim (gri CTA) */
/* Anasayfa tanıtım yazısı — yumuşak geçişli zemin.
   Üç katman: sol üstte birincil renkten çok açık bir ışık, sağ altta hafif
   nötr gölge, altta beyazdan kreme dönen dikey geçiş. Kenarlarda düz çizgi
   yerine uçları sönen ince ayraçlar var; böylece komşu beyaz bölümlerle
   arasında sert bir sınır oluşmuyor. Renk birincil renkten türediği için
   panelden değiştirilince zemin de takip eder. */
.bolum.tanitim {
    position: relative;
    background:
        radial-gradient(120% 82% at 12% 0%,   color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 62%),
        radial-gradient(100% 90% at 100% 100%, color-mix(in srgb, var(--siyah) 6%, transparent) 0%, transparent 58%),
        linear-gradient(180deg, #fff 0%, var(--zemin-2) 48%, #fff 100%);
}
.bolum.tanitim::before,
.bolum.tanitim::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
}
.bolum.tanitim::before { top: 0; }
.bolum.tanitim::after  { bottom: 0; }

.deneyim { background: var(--zemin-2); text-align: center; }
.deneyim h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; }
.deneyim p { color: var(--metin-2); max-width: 62ch; margin: 16px auto 26px; }

/* E-Katalog */
/* E-Katalog bandı */
.ekatalog { position: relative; background: var(--siyah); color: #fff; padding: 56px 0; overflow: hidden; }
.ekatalog::before {   /* köşede yumuşak vurgu ışığı */
    content: ""; position: absolute; right: -140px; top: -160px; width: 460px; height: 460px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 68%); pointer-events: none;
}
.ekatalog-ic { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ek-metin { max-width: 620px; }
.ek-etiket {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
    color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2px;
    padding: 4px 10px; margin-bottom: 14px;
}
.ekatalog h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; margin: 0 0 10px; }
.ekatalog p { margin: 0; color: #a8a8a8; font-size: 15.5px; line-height: 1.65; }
.ek-dugme {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
    background: #fff; color: var(--siyah); font-size: 14.5px; font-weight: 500;
    padding: 15px 30px; border-radius: 2px; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ek-dugme:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
@media (max-width: 700px) {
    .ekatalog-ic { flex-direction: column; align-items: flex-start; gap: 26px; }
    .ek-dugme { width: 100%; justify-content: center; }
}

/* ============================ FOOTER (wpplus stili) ============================ */
.site-alt { background: var(--siyah); color: #cfcfcf; padding: 70px 0 30px; }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.6fr; gap: 40px; padding-bottom: 50px; }
.site-alt h4 { color: #fff; font-size: 17px; font-weight: 500; margin-bottom: 20px; }
.alt-blok ul li { margin-bottom: 12px; font-size: 14px; color: #b3b3b3; }
.alt-blok a:hover { color: #fff; }
.alt-saat-satir { display: flex; justify-content: space-between; max-width: 260px; font-size: 14px; color: #b3b3b3; margin-bottom: 10px; }
.bulten-form { display: flex; margin-top: 14px; }
.bulten-form input { flex: 1; padding: 12px 14px; border: 1px solid #444; background: #161616; color: #fff; font-size: 14px; }
.bulten-form button { width: 48px; background: #2a2a2a; border: 1px solid #444; border-left: none; color: #fff; }
.bulten-not { font-size: 12.5px; color: #8a8a8a; margin-top: 20px; }
.alt-logo { max-height: 40px; margin: 0 0 16px; filter: brightness(0) invert(1); }
/* Masaüstünde marka bloğu sola dayalı; mobilde tüm footer ortalanır */
.alt-sosyal { display: flex; gap: 16px; justify-content: flex-start; margin-bottom: 16px; }
.alt-sosyal a { width: 40px; height: 40px; border-radius: 50%; background: #2a2a2a; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.alt-sosyal a:hover { background: var(--accent); }
.alt-telif { text-align: center; font-size: 12.5px; color: #8a8a8a; letter-spacing: 1px; }

/* 404 */
.hata-sayfa { padding: 140px 0; text-align: center; }
.hata-sayfa h1 { font-size: 90px; margin: 0; }
.hata-metin { color: var(--metin-2); margin-bottom: 26px; }

/* ============================ SABİT SAYFA ============================ */
/* Kapak görselli hero */
.sayfa-hero {
    position: relative; display: flex; align-items: flex-end;
    background: var(--siyah) center/cover no-repeat; color: #fff;
    min-height: 340px; padding: 120px 0 54px; margin-top: 0;
}
/* Kapak görseli <picture> ile basılır; gradyan üstünde, metin en üstte */
.sh-gorsel { position: absolute; inset: 0; z-index: 0; }
.sh-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sayfa-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--siyah) 30%, transparent) 0%,
        color-mix(in srgb, var(--siyah) 55%, transparent) 55%,
        color-mix(in srgb, var(--siyah) 82%, transparent) 100%);
}
.sayfa-hero .kapsayici { position: relative; z-index: 2; }
.sayfa-hero h1 { font-size: clamp(28px, 4vw, 46px); margin: 0; position: relative; padding-left: 18px; }
.sayfa-hero h1::before {
    content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 3px; background: var(--accent); border-radius: 2px;
}
.sayfa-hero:not(.sade) .sayfa-ozet { padding-left: 18px; }
@media (max-width: 700px) { .sayfa-hero { min-height: 240px; padding: 90px 0 40px; } }
/* Kapak görseli yoksa header katı olur; bu yüzden üstten fazladan boşluk gerekmez */
.sayfa-hero.sade {
    background: var(--zemin-2); color: var(--metin);
    padding: 52px 0 48px; min-height: 0;
    border-bottom: 1px solid var(--cizgi);
}
.sayfa-hero.sade::before { display: none; }
.sayfa-ozet { margin: 12px 0 0; max-width: 720px; font-size: 16px; opacity: .82; line-height: 1.7; }
.sayfa-hero.sade .sayfa-ozet { padding-left: 18px; }

.kirinti { display: flex; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 16px; letter-spacing: .2px; }
.kirinti a { color: var(--metin-2); transition: color .2s ease; }
.kirinti a:hover { color: var(--accent); }
.kirinti > span[aria-hidden] { color: var(--cizgi); }
.kirinti > span:not([aria-hidden]) { color: var(--metin); font-weight: 500; }
.sayfa-hero:not(.sade) .kirinti a { color: rgba(255,255,255,.7); }
.sayfa-hero:not(.sade) .kirinti > span:not([aria-hidden]) { color: #fff; }

.sayfa-govde { padding: 56px 0 78px; }
.sayfa-govde.kutulu .metin-alan { max-width: 860px; margin: 0 auto; }
.metin-alan { font-size: 16px; line-height: 1.8; color: var(--metin); }
.metin-alan h2 { font-size: 26px; margin: 34px 0 12px; }
.metin-alan h3 { font-size: 20px; margin: 28px 0 10px; }
.metin-alan h4 { font-size: 17px; margin: 22px 0 8px; }
.metin-alan p { margin: 0 0 16px; }
.metin-alan ul, .metin-alan ol { margin: 0 0 18px; padding-left: 22px; }
.metin-alan ul { list-style: disc; }
.metin-alan ol { list-style: decimal; }
.metin-alan li { margin-bottom: 7px; }
.metin-alan a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.metin-alan a:hover { color: var(--link-hover); }
.metin-alan img { border-radius: 4px; margin: 18px 0; }
.metin-alan table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.metin-alan th, .metin-alan td { border: 1px solid var(--cizgi); padding: 10px 12px; text-align: left; }
.metin-alan th { background: var(--zemin-2); font-weight: 600; }
.metin-alan blockquote { margin: 20px 0; padding: 14px 20px; border-left: 3px solid var(--accent); background: var(--zemin-2); color: var(--metin-2); }
.metin-alan hr { border: none; border-top: 1px solid var(--cizgi); margin: 30px 0; }
.ipucu-metin { color: var(--metin-2); }

/* Slider: yönetilebilir kaplama + metin hizalama.
   Opaklık slayt üzerinde satır içi verilir (kaplama_opasite / 100); soldan sağa
   azalan gradyan metin tarafını okunaklı tutar. Değer 0 ise katman görünmez. */
.hero-kaplama {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.7) 100%);
}
/* Metin hizalama (Banner Yönetimi'ndeki "metin_hizalama" ayarı) —
   z-index'e dokunmuyoruz; yukarıdaki .hero-ic kuralı metni karartma katmanının üstünde tutar. */
.hero-ic.hiza-orta { text-align: center; }
.hero-ic.hiza-orta .hero-metin { margin: 0 auto; }
.hero-ic.hiza-sag { text-align: right; }
.hero-ic.hiza-sag .hero-metin { margin-left: auto; }
.hero-ust { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 9px; opacity: .9; }

/* ==================== İÇERİK KARTLARI (ürün / proje / haber) ==================== */
/* Boş durum — çıplak metin yerine kesikli çerçeveli alan */
.bos-durum {
    text-align: center; color: var(--metin-2); padding: 64px 24px;
    border: 1px dashed var(--cizgi); border-radius: 4px; background: var(--zemin-2);
    font-size: 15px;
}
/* ---------- Kategori filtre şeridi (sekme görünümlü, sayfa yenilemesiz) ---------- */
.filtre-serit {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px;
    padding-bottom: 18px; border-bottom: 1px solid var(--cizgi);
}
.filtre-sekme {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border: 1px solid var(--cizgi); border-radius: 999px;
    background: #fff; color: var(--metin); font-size: 14px; font-weight: 500;
    line-height: 1; cursor: pointer; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.filtre-sekme:hover { border-color: var(--accent); color: var(--accent); }
.filtre-sekme.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Sekme içindeki adet rozeti */
.fs-adet {
    font-size: 12px; font-weight: 600; color: var(--metin-2);
    background: color-mix(in srgb, var(--metin) 8%, transparent);
    border-radius: 999px; padding: 2px 7px; min-width: 20px; text-align: center;
}
.filtre-sekme.aktif .fs-adet { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 600px) {
    /* Dar ekranda tek satırda yatay kaydırılır */
    .filtre-serit { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .filtre-serit::-webkit-scrollbar { display: none; }
    .filtre-sekme { padding: 8px 14px; font-size: 13px; }
}

/* ---------- YATAY KARUSEL ----------
   Kaydırma yerel (overflow-x) olduğu için dokunmatik/trackpad hareketi ve
   klavye bedava gelir; oklar yalnızca taşma varsa JS ile görünür kılınır.
   Aynı anda kaç kart görüneceği --gorunen ile ayarlanır. */
.karusel { position: relative; --gorunen: 4; --bosluk: 26px; }
.karusel-yol {
    display: flex; gap: var(--bosluk);
    overflow-x: auto; scroll-snap-type: x proximity;
    scroll-behavior: smooth; scrollbar-width: none;
    /* Kart gölgesi/hover yükselmesi kırpılmasın */
    padding: 6px 2px 14px; margin: -6px -2px -14px;
}
.karusel-yol::-webkit-scrollbar { display: none; }
.karusel-yol > * {
    flex: 0 0 calc((100% - (var(--gorunen) - 1) * var(--bosluk)) / var(--gorunen));
    scroll-snap-align: start;
}
.krs-ok {
    position: absolute; top: calc(50% - 20px); transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; z-index: 3;
    border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
    font-size: 24px; line-height: 1; display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.krs-ok:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.krs-ok[hidden] { display: none; }
.krs-ok[disabled] { opacity: .32; pointer-events: none; }
.krs-onceki { left: -18px; }
.krs-sonraki { right: -18px; }
@media (max-width: 1440px) { .krs-onceki { left: 6px; } .krs-sonraki { right: 6px; } }
@media (max-width: 1200px) { .karusel { --gorunen: 3; } }
@media (max-width: 900px)  { .karusel { --gorunen: 2; --bosluk: 18px; } }
@media (max-width: 560px)  { .karusel { --gorunen: 1.15; } .krs-ok { display: none; } }

.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.kart-izgara.genis { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ic-kart[hidden] { display: none; }   /* filtre gizlemesi display:block'u yenmeli */
.ic-kart {
    display: block; background: #fff; border: 1px solid var(--cizgi); border-radius: 4px;
    overflow: hidden; position: relative;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.ic-kart:hover { box-shadow: 0 14px 34px rgba(0,0,0,.11); transform: translateY(-4px); border-color: transparent; }
/* Hover'da alt kenarda vurgu şeridi */
.ic-kart::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
}
.ic-kart:hover::after { transform: scaleX(1); }
.ik-gorsel { display: block; aspect-ratio: 1/1; background: var(--zemin-2); overflow: hidden; }
.ic-kart.proje .ik-gorsel { aspect-ratio: 1.92; }
.ik-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ic-kart:hover .ik-gorsel img { transform: scale(1.04); }
/* Görseli olmayan kart: site logosu ortada, kırpılmadan */
.ik-gorsel.yedek { display: grid; place-items: center; background: var(--zemin-2); }
.ik-gorsel.yedek img { width: auto; height: auto; max-width: 52%; max-height: 42%; object-fit: contain; opacity: .32; }
.ic-kart:hover .ik-gorsel.yedek img { transform: none; opacity: .45; }
/* ---------- Ürün kategorileri ızgarası ---------- */
/* Görsel kutusu ikincil renkte; kategori adı ortalı */
.kategori-izgara .ik-gorsel { background: var(--siyah); }
.kategori-izgara .ik-alt { text-align: center; }
/* Görseli olmayan kategoride logo koyu zeminde okunsun diye beyaza çevrilir */
.kategori-izgara .ik-gorsel.yedek img { filter: brightness(0) invert(1); opacity: .38; }
.kategori-izgara .ic-kart:hover .ik-gorsel.yedek img { opacity: .58; }

.ik-alt { display: block; padding: 20px 22px 24px; }
.ik-alt h3 { font-size: 17px; margin: 0 0 6px; line-height: 1.35; transition: color .25s ease; }
.ic-kart:hover .ik-alt h3 { color: var(--accent); }
.ik-meta { font-size: 13px; color: var(--metin-2); }
.ik-tarih { display: block; font-size: 12px; color: var(--accent); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.ik-ozet { display: block; font-size: 14px; color: var(--metin-2); margin-bottom: 12px; line-height: 1.6; }
.ik-devam { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--metin); transition: gap .25s ease; }
.ic-kart:hover .ik-devam { gap: 10px; color: var(--accent); }
.alt-kategori-serit { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.alt-kategori-serit a { border: 1px solid var(--cizgi); padding: 9px 18px; border-radius: 2px; font-size: 14px; transition: .2s; }
.alt-kategori-serit a:hover { background: var(--siyah); color: #fff; border-color: var(--siyah); }
.alt-kategori-serit span { color: var(--metin-2); }
.alt-kategori-serit a:hover span { color: #cfcfcf; }
/* Bulunulan alt kategori — şerit kardeşleri gösterirken hangisindeyiz belli olsun */
.alt-kategori-serit a.aktif { background: var(--siyah); color: #fff; border-color: var(--siyah); }
.alt-kategori-serit a.aktif span { color: #cfcfcf; }

/* ---------- Ürün detay ---------- */
.ud-duzen { display: grid; grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: start; }
/* Ana görsel: tek çerçeve — buton varsayılan kenarlığı sıfırlanır, aksi halde iç içe border görünür */
.ud-buyuk {
    display: block; width: 100%; aspect-ratio: 1; padding: 0; margin: 0;
    position: relative; overflow: hidden; cursor: zoom-in;
    background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 0;
    -webkit-appearance: none; appearance: none;
}
.ud-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ud-buyuk:hover img { transform: scale(1.03); }
.ud-buyutec {
    position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px;
    display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--siyah) 62%, transparent); color: #fff;
    opacity: 0; transition: opacity .2s ease;
}
.ud-buyuk:hover .ud-buyutec { opacity: 1; }
.ud-kucukler { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ud-kucuk { width: 78px; height: 78px; padding: 0; border: 1px solid var(--cizgi); background: none; overflow: hidden; }
.ud-kucuk.aktif { border-color: var(--siyah); }
.ud-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.ud-bilgi h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 10px; }
.ud-kod { font-size: 13px; color: var(--metin-2); letter-spacing: .6px; margin: 0 0 12px; }
/* Fiyat — birincil renkli kutu */
.ud-fiyat { margin: 0 0 18px; }
.ud-fiyat span {
    display: inline-block; background: var(--siyah); color: #fff;
    font-size: 22px; font-weight: 600; letter-spacing: .3px;
    padding: 10px 22px; border-radius: 2px;
}
.ud-ozet { color: var(--metin-2); margin-bottom: 24px; }
.ud-kumas { margin: 28px 0; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.ud-kumas h3 { font-size: 16px; margin-bottom: 14px; }
.ud-swatchlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 12px; }
.swatch { margin: 0; text-align: center; }
.swatch-ac { display: block; width: 100%; padding: 0; border: 1px solid var(--cizgi); border-radius: 3px; background: none; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.swatch-ac:hover { border-color: var(--siyah); transform: translateY(-2px); }
.swatch-ac img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.swatch figcaption { font-size: 11.5px; color: var(--metin-2); margin-top: 5px; line-height: 1.3; }

/* Görsel büyütme penceresi (kumaş renkleri) */
.gorsel-ortu { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,8,.9); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.gorsel-ortu[hidden] { display: none; }
/* Görsel kutusu ekranı doldurur; küçük görseller (kumaş swatch'ı) kendi
   doğal boyutunda kalır, büyük fotoğraflar tam ekranı kullanır. */
.go-kutu { margin: 0; text-align: center; max-width: min(1500px, 94vw); }
.go-kutu img { max-width: 100%; max-height: 82vh; width: auto; border-radius: 4px; }
.go-kutu figcaption { color: #fff; font-size: 15px; margin-top: 16px; letter-spacing: .3px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.go-sayac { color: #8f8f8f; font-size: 13px; }
.go-kapat { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 1; }
.go-kapat:hover { background: rgba(255,255,255,.24); }
.go-ok {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 34px; line-height: 1;
    display: grid; place-items: center; transition: background .2s ease;
}
.go-ok:hover { background: rgba(255,255,255,.26); }
.go-onceki { left: 24px; }
.go-sonraki { right: 24px; }
@media (max-width: 600px) {
    .go-ok { width: 42px; height: 42px; font-size: 26px; }
    .go-onceki { left: 10px; }
    .go-sonraki { right: 10px; }
}
.ud-cta { margin-top: 8px; }
.ud-govde { margin-top: 54px; padding-top: 36px; border-top: 1px solid var(--cizgi); }

/* ---------- Proje detay galerisi: solda küçükler, sağda büyük ---------- */
/* Galeri kapsayıcısı sayfa genişliğinden dar — okuma alanıyla aynı ölçekte durur */
.pd-galeri {
    display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: start;
    max-width: 980px; margin: 0 auto;
}

.pd-kucukler {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 620px; overflow-y: auto; padding-right: 5px;
}
.pd-kucuk {
    padding: 0; border: 1px solid var(--cizgi); background: var(--zemin-2);
    aspect-ratio: 1.4; overflow: hidden; cursor: pointer; flex-shrink: 0;
    transition: border-color .2s ease, opacity .2s ease; opacity: .72;
}
.pd-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-kucuk:hover { opacity: 1; }
.pd-kucuk.aktif { border-color: var(--accent); opacity: 1; }
/* İnce kaydırma çubuğu */
.pd-kucukler::-webkit-scrollbar { width: 6px; }
.pd-kucukler::-webkit-scrollbar-track { background: transparent; }
.pd-kucukler::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 3px; }

.pd-buyuk {
    position: relative; display: block; width: 100%; padding: 0; margin: 0;
    border: 1px solid var(--cizgi); background: var(--zemin-2);
    aspect-ratio: 1.92; overflow: hidden; cursor: zoom-in;
    -webkit-appearance: none; appearance: none;
}
.pd-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pd-buyuk:hover img { transform: scale(1.03); }
.pd-buyutec {
    position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px;
    display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--siyah) 62%, transparent); color: #fff;
    opacity: 0; transition: opacity .2s ease;
}
.pd-buyuk:hover .pd-buyutec { opacity: 1; }
.pd-sayac {
    position: absolute; left: 14px; bottom: 14px;
    background: color-mix(in srgb, var(--siyah) 62%, transparent); color: #fff;
    font-size: 12.5px; letter-spacing: .5px; padding: 5px 12px; border-radius: 999px;
}

@media (max-width: 760px) {
    /* Dar ekranda küçükler alta, yatay şerit olarak geçer */
    .pd-galeri { grid-template-columns: 1fr; }
    .pd-kucukler { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; order: 2; padding: 0 0 6px; }
    .pd-kucuk { width: 108px; flex: 0 0 108px; }
    .pd-buyuk { order: 1; }
}

/* ---------- Haber detay ---------- */
.yazi { max-width: 820px; margin: 0 auto; }
.yazi-tarih { color: var(--accent); font-size: 13.5px; letter-spacing: .5px; margin: 0 0 14px; }
.yazi-kapak { width: 100%; border-radius: 3px; margin-bottom: 26px; }
.yazi-ozet { font-size: 18px; color: var(--metin-2); margin-bottom: 22px; }

/* ---------- İletişim ---------- */
.il-duzen { display: grid; grid-template-columns: 390px 1fr; gap: 30px; align-items: start; }

/* Sol: koyu bilgi kartı */
.il-bilgi {
    background: var(--siyah); color: #d9d9d9; padding: 36px 32px; border-radius: 4px;
    position: relative; overflow: hidden;
}
.il-bilgi::before {
    content: ""; position: absolute; right: -90px; bottom: -110px; width: 300px; height: 300px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 70%);
}
.il-bilgi > * { position: relative; }
.il-bilgi h2 { font-size: 21px; color: #fff; margin-bottom: 24px; }
.il-liste { display: flex; flex-direction: column; gap: 20px; }
.il-liste li { display: flex; gap: 14px; align-items: flex-start; }
.il-ikon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #fff;
    display: grid; place-items: center;
}
.il-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.il-etiket { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: #8f8f8f; }
.il-govde a, .il-govde span:last-child { color: #eaeaea; font-size: 14.5px; line-height: 1.55; word-break: break-word; }
.il-govde a:hover { color: var(--accent); }
.il-alt-baslik { font-size: 14px; color: #fff; margin: 30px 0 12px; text-transform: uppercase; letter-spacing: 1px; }
.il-calisma li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #cfcfcf; }
.il-calisma li:last-child { border-bottom: none; }
.il-calisma li.kapali { color: #7a7a7a; }
.il-harita-btn {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
    border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: 14px;
    padding: 12px 22px; border-radius: 2px; transition: background .2s ease, border-color .2s ease;
}
.il-harita-btn:hover { background: var(--accent); border-color: var(--accent); }

/* Sağ: form kartı */
.il-form.kart-form { padding: 34px 34px 30px; }
.il-form h2 { font-size: 21px; margin-bottom: 6px; }
.il-form-alt { color: var(--metin-2); margin-bottom: 26px; font-size: 15px; }
.il-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* İletişim sabit sayfasının tanıtım metni — form düzeninin üstünde */
.il-giris { max-width: 100%; margin: 0 0 38px; color: var(--metin-2); font-size: 16.5px; text-align: center; }
.il-giris p:last-child { margin-bottom: 0; }

.il-form label, .il-tam { display: block; margin-bottom: 20px; }
.il-form label span { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; }
.il-form label b { color: var(--accent); }
.il-form input, .il-form textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--metin);
    padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: 2px; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.il-form input:focus, .il-form textarea:focus {
    outline: none; border-color: var(--siyah); box-shadow: 0 0 0 3px color-mix(in srgb, var(--siyah) 8%, transparent);
}
.il-form textarea { resize: vertical; min-height: 130px; }
.il-form .btn { padding: 15px 40px; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Onay kutusu (KVKK vb.) ---------- */
.onay-kutu {
    display: flex !important; align-items: flex-start; gap: 12px;
    margin: 4px 0 22px !important; cursor: pointer; user-select: none;
}
.onay-kutu input { position: absolute; opacity: 0; width: 0; height: 0; }
.onay-isaret {
    position: relative; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
    border: 1px solid var(--cizgi); border-radius: 3px; background: #fff;
    transition: background .18s ease, border-color .18s ease;
}
/* Tik: sağ+alt kenarlıklı bir dikdörtgen 45° döndürülür (klasik yöntem) */
.onay-isaret::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transform-origin: center;
    transition: transform .18s ease;
}
.onay-kutu:hover .onay-isaret { border-color: var(--siyah); }
.onay-kutu input:checked + .onay-isaret { background: var(--accent); border-color: var(--accent); }
.onay-kutu input:checked + .onay-isaret::after { transform: rotate(45deg) scale(1); }
.onay-kutu input:focus-visible + .onay-isaret { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.onay-metin { display: block !important; font-size: 13.5px; color: var(--metin-2); line-height: 1.6; margin: 0 !important; font-weight: 400 !important; }
.onay-metin a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.onay-metin a:hover { color: var(--link-hover); }
.alan-hatali .onay-isaret { border-color: #dc2626; }

/* ---------- Form doğrulama geri bildirimi ---------- */
.alan-hatali input, .alan-hatali select, .alan-hatali textarea,
.alan-hatali .kf-checkbox-grid { border-color: #dc2626 !important; }

/* Zorunlu alan geçerli şekilde doldurulduğunda yeşil çerçeve + tik */
.alan-gecerli input:not([type=checkbox]), .alan-gecerli select, .alan-gecerli textarea {
    border-color: #16a34a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5 4.7 8.7 12 1.4' stroke='%2316a34a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
/* Select'te ok işareti zaten sağda — tiki onun soluna al */
.alan-gecerli select {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5 4.7 8.7 12 1.4' stroke='%2316a34a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right 38px center, right 15px center;
    background-repeat: no-repeat, no-repeat;
    padding-right: 62px;
}
.alan-gecerli textarea { background-position: right 14px top 14px; }
.alan-gecerli input:focus, .alan-gecerli select:focus, .alan-gecerli textarea:focus {
    box-shadow: 0 0 0 3px rgba(22,163,74,.13) !important;
}
/* Dosya alanı ve onay kutusunda tik yerine yalnızca yeşil çerçeve */
.alan-gecerli input[type=file] { border-color: #16a34a !important; }
.alan-gecerli .onay-isaret { border-color: #16a34a; }
.alan-hatali input:focus, .alan-hatali select:focus, .alan-hatali textarea:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.14) !important;
}
.alan-hata {
    display: block;
    font-size: 12.5px; color: #dc2626; margin-top: 6px; line-height: 1.4;
    animation: alanHataGir .18s ease;
}
@keyframes alanHataGir { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
button.yukleniyor { opacity: .6; pointer-events: none; }
.form-bildirim { padding: 14px 20px; border-radius: 3px; margin-bottom: 26px; font-size: 15px; }
.form-bildirim.basari { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.form-bildirim.hata { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
/* ---------- Kariyer: iki kolon (bilgi paneli + form) ---------- */
.kariyer-bolum { background: var(--zemin-2); }
.kariyer-duzen { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start; }

/* Sol panel — koyu, sayfa kaydırılırken sabit kalır */
.kr-yan {
    background: var(--siyah); color: #cfcfcf; border-radius: 4px;
    padding: 32px 30px; position: sticky; top: 96px; overflow: hidden;
}
.kr-yan::before {
    content: ""; position: absolute; right: -90px; top: -120px; width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.kr-yan > * { position: relative; }
.kr-metin { font-size: 15px; line-height: 1.8; color: #c4c4c4; }
.kr-metin p { margin: 0 0 14px; }
.kr-metin p:last-child { margin-bottom: 0; }
.kr-metin h2, .kr-metin h3, .kr-metin h4 { color: #fff; font-size: 17px; margin: 20px 0 10px; }
.kr-metin ul { margin: 0 0 14px; padding-left: 18px; list-style: disc; }
.kr-metin a { color: var(--accent); }

.kr-blok { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.kr-blok h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.1px; color: #fff; margin: 0 0 14px; }
.kr-etiketler { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-etiketler li {
    font-size: 12.5px; color: #d8d8d8; padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
}
.kr-iletisim { display: flex; flex-direction: column; gap: 8px; }
.kr-iletisim a { color: #eaeaea; font-size: 15px; }
.kr-iletisim a:hover { color: var(--accent); }
.kr-kvkk { margin: 24px 0 0; font-size: 12px; color: #7f7f7f; line-height: 1.6; }

.kr-form { min-width: 0; }

/* Form kartı + numaralı bölümler */
.kart-form { background: #fff; border: 1px solid var(--cizgi); border-radius: 4px; padding: 8px 34px 34px; }

@media (max-width: 980px) {
    .kariyer-duzen { grid-template-columns: 1fr; }
    /* static DEĞİL relative: static olursa ::before parıltısının konumlandırma
       referansı panel olmaktan çıkar, overflow:hidden onu kırpmaz ve
       right:-90px ile sayfayı yatay taşırır. */
    .kr-yan { position: relative; top: auto; }
}
@media (max-width: 760px) {
    /* Dar ekranda 34px yan boşluk forma yer bırakmıyor.
       .il-form.kart-form da seçiciye alınmalı; yoksa daha özgül olan o kural
       (iletişim ve kariyer formları) bu değeri ezer. */
    .kart-form, .il-form.kart-form { padding: 34px 23px 30px; }
}
@media (max-width: 560px) {
    .kr-yan { padding-left: 20px; padding-right: 20px; }
    /* Uzun pozisyon adları tek satıra sığmayınca taşmasın, sarsın */
    .il-form .kf-chk > span, .kf-chk > span { white-space: normal; max-width: 100%; }
    .kf-dosyalar input[type=file] { font-size: 12.5px; padding: 10px 12px; }
    .kf-dosyalar input[type=file]::file-selector-button { padding: 6px 10px; margin-right: 9px; font-size: 12px; }
}

/* reCAPTCHA v2 kutusu 302px sabit genişliktedir; dar ekranda kartı taşırmasın */
.rc-alan { max-width: 100%; overflow: hidden; }
@media (max-width: 380px) {
    .rc-alan .g-recaptcha { transform: scale(.82); transform-origin: left top; height: 63px; }
}
.kf-bolum { padding: 26px 0 4px; border-top: 1px solid var(--cizgi); }
.kf-bolum:first-of-type { border-top: none; padding-top: 12px; }
.kf-bolum-baslik {
    display: flex; align-items: center; gap: 12px;
    font-size: 16px; font-weight: 600; margin: 0 0 22px; color: var(--metin);
}
.kf-no {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    background: var(--siyah); color: #fff; font-size: 13px; font-weight: 600;
    display: grid; place-items: center;
}
.kf-gonder { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.kf-gonder .btn { padding: 15px 44px; }
/* Grid öğeleri varsayılan min-width:auto ile içeriklerinden dar olamaz; uzun
   <option> metni olan select'ler ya da dosya girdileri sütunu şişirip sayfayı
   yatay taşırıyordu. min-width:0 bunu keser. */
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-ikili > * { min-width: 0; }
.form-alan { margin-bottom: 20px; min-width: 0; }
.form-alan input, .form-alan select, .form-alan textarea { max-width: 100%; }
.form-alan > label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; color: var(--metin); }
/* Zorunlu yıldızı etiketin hemen sağında kalmalı —
   `.il-form label span { display:block }` kuralı onu alt satıra atmasın. */
.il-form label .zorunlu, .zorunlu {
    display: inline !important; color: var(--accent);
    margin: 0 0 0 2px !important; font-size: inherit; font-weight: inherit;
}
.il-form input[type=text], .il-form input[type=email], .il-form input[type=tel],
.il-form select, .il-form textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--metin);
    padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: 2px; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.il-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.il-form input:focus, .il-form select:focus, .il-form textarea:focus {
    outline: none; border-color: var(--siyah); box-shadow: 0 0 0 3px color-mix(in srgb, var(--siyah) 8%, transparent);
}
.il-form textarea { resize: vertical; min-height: 210px; }

/* Pozisyon/bölüm seçimi — seçilebilir etiket kartları.
   Seçiciler `.il-form label span { display:block }` kuralını yenecek özgüllükte
   olmalı; aksi halde etiket blok olur ve içindeki halka ince çizgiye dönüşür. */
.kf-checkbox-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.kf-chk { position: relative; margin: 0 !important; cursor: pointer; }
.kf-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.il-form .kf-chk > span, .kf-chk > span {
    display: inline-flex !important; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; margin: 0 !important;
    border: 1px solid var(--cizgi); background: #fff;
    font-size: 13px; font-weight: 400; color: var(--metin); white-space: nowrap; line-height: 1.3;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
/* Sol tarafta içi boş halka; seçilince dolar ve tik çıkar */
.il-form .kf-chk > span::before, .kf-chk > span::before {
    content: ""; display: block; width: 13px; height: 13px; flex: 0 0 13px;
    border-radius: 50%; border: 1.5px solid var(--cizgi); background: transparent;
    transition: border-color .18s ease, background .18s ease;
}
.kf-chk:hover > span { border-color: var(--siyah); }
.il-form .kf-chk input:checked + span, .kf-chk input:checked + span {
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    border-color: var(--accent); color: var(--accent); font-weight: 500;
}
.il-form .kf-chk input:checked + span::before, .kf-chk input:checked + span::before {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 9 7'%3E%3Cpath d='M1 3.4 3.3 5.7 8 1' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.kf-chk input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

/* min(240px, 100%): dar ekranda sütun 240px'te sabitlenip taşmasın */
.kf-dosyalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.kf-dosyalar > * { min-width: 0; }
/* Dosya girdisinin iç (min-content) genişliği "Dosya Seç" düğmesi + dosya adı
   kadardır ve width:100% bunu küçültmez; min-width:0 + overflow olmadan dar
   ekranda sayfayı yatay taşırır. */
.kf-dosyalar input[type=file] {
    width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
    font-family: inherit; font-size: 13.5px; color: var(--metin-2);
    padding: 12px 14px; border: 1px dashed var(--cizgi); border-radius: 2px;
    background: var(--zemin-2); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.kf-dosyalar input[type=file]:hover { border-color: var(--siyah); background: #fff; }
.kf-dosyalar input[type=file]::file-selector-button {
    font-family: inherit; font-size: 13px; margin-right: 12px; padding: 7px 14px;
    border: none; border-radius: 2px; background: var(--siyah); color: #fff; cursor: pointer;
}
.kf-ipucu { font-size: 13px; color: var(--metin-2); margin: 12px 0 26px; }

/* KVKK aydınlatma metni — kaydırılabilir kutu */
.kvkk-kutu {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--cizgi); border-radius: 3px; background: var(--zemin-2);
    padding: 18px 20px; font-size: 13.5px; line-height: 1.7; color: var(--metin-2);
}
.kvkk-kutu:focus-visible { outline: none; border-color: var(--siyah); box-shadow: 0 0 0 3px color-mix(in srgb, var(--siyah) 8%, transparent); }
.kvkk-kutu h2, .kvkk-kutu h3, .kvkk-kutu h4 { font-size: 14px; color: var(--metin); margin: 16px 0 8px; }
.kvkk-kutu h2:first-child, .kvkk-kutu h3:first-child { margin-top: 0; }
.kvkk-kutu p { margin: 0 0 10px; }
.kvkk-kutu ul, .kvkk-kutu ol { margin: 0 0 10px; padding-left: 18px; }
/* İnce kaydırma çubuğu */
.kvkk-kutu::-webkit-scrollbar { width: 8px; }
.kvkk-kutu::-webkit-scrollbar-track { background: transparent; }
.kvkk-kutu::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 4px; }
.kvkk-kutu::-webkit-scrollbar-thumb:hover { background: var(--metin-2); }
.kf-kvkk-bolum .onay-kutu { margin-top: 16px !important; }

@media (max-width: 760px) {
    .form-ikili { grid-template-columns: 1fr; gap: 0; }
    .kf-dosyalar { grid-template-columns: 1fr; }
}

/* Harita — ekran genişliğinde, kapsayıcı sınırı olmadan */
.il-harita { width: 100%; line-height: 0; background: var(--zemin-2); }
.il-harita iframe { width: 100% !important; height: 440px !important; min-height: 440px; border: 0; display: block; filter: grayscale(.25); transition: filter .3s ease; }
.il-harita:hover iframe { filter: grayscale(0); }
@media (max-width: 700px) { .il-harita iframe { height: 320px !important; min-height: 320px; } }

/* reCAPTCHA alanı */
.rc-alan { margin-bottom: 20px; }
.rc-alan .g-recaptcha { display: inline-block; }

@media (max-width: 980px) {
    .ud-duzen, .il-duzen { grid-template-columns: 1fr; gap: 32px; }
    .il-satir { grid-template-columns: 1fr; }
}

/* ============================ ÇEREZ ONAYI ============================ */
.cerez-serit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--siyah); color: #fff;
    box-shadow: 0 -6px 24px rgba(0,0,0,.22);
    transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.85,.25,1);
}
.cerez-serit.gir { transform: translateY(0); }
.cs-ic { display: flex; align-items: center; gap: 22px; padding: 18px 32px; flex-wrap: wrap; }
.cs-metin { margin: 0; flex: 1; min-width: 260px; font-size: 14.5px; color: #d6d6d6; line-height: 1.6; }
.cs-dugmeler { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.cs-link { font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .82; }
.cs-link:hover { opacity: 1; }
.cs-kabul { background: #fff; color: var(--siyah); border-color: #fff; padding: 11px 30px; }
.cs-kabul:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Çerez şeridi açıkken WhatsApp düğmesi üstte kalsın */
body.cerez-acik .wa-yuzen { bottom: 96px; }

/* ============================ DUYARLI ============================ */
@media (max-width: 1024px) {
    .urun-grup-grid { grid-template-columns: repeat(2, 1fr); }
    .alt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
    /* Dar ekranda panelde yalnızca hamburger kalır */
    .ana-menu > a:not(.ev) { display: none; }
    .ana-menu > a.ev, .ana-menu > .hamburger { height: 54px; }
}
@media (max-width: 820px) {
    .su-sag .su-dil { display: none; }
    .proje-grid { grid-template-columns: 1fr; }
    .tm-ic { flex-direction: column; gap: 30px; }
    .tm-kol:first-child { text-align: center; border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 30px; }
    .tm-kol { text-align: center; padding: 0 20px; }
    /* Footer tek sütuna düşer — tüm blokların içeriği ortalanır */
    .alt-grid { grid-template-columns: 1fr; text-align: center; gap: 34px; }
    .alt-blok .alt-sosyal { justify-content: center; }
    .alt-logo { margin-left: auto; margin-right: auto; }
    .alt-saat-satir { max-width: 240px; margin-left: auto; margin-right: auto; }
    .bulten-form { max-width: 320px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
    .kapsayici { padding: 0 20px; }
    .hero-metin { padding: 20px 18px; }
    .hero-metin p { font-size: 14px; }
    .urun-grup-grid { grid-template-columns: 1fr; }
    .cs-ic { padding: 16px 20px; gap: 14px; }
    .cs-dugmeler { width: 100%; justify-content: space-between; }
    body.cerez-acik .wa-yuzen { bottom: 150px; }
}