/* ==========================================================================
   DEMO 4 — Premium / editoryal
   Karakter: kirik beyaz zemin, serif basliklar, bol bosluk, ince ayraclar,
   numarali dergi duzeni. Yesil cok az — yalnizca ince aksan.
   Yapisal notrlemeler css/demo-base.css'ten gelir.
   ========================================================================== */

:root {
    --brand:      #2f7a35;
    --brand-deep: #24602a;

    --ink:       #14171a;      /* neredeyse siyah, sicak */
    --ink-2:     #2f3438;
    --muted:     #6f7579;
    --muted-2:   #9aa0a4;
    --line:      #e3e0d9;      /* sicak ayrac */
    --line-2:    #ece9e3;
    --surface:   #fbfaf7;      /* kirik beyaz / fildisi */
    --surface-2: #f4f2ed;
    --surface-3: #eae7e0;

    --serif: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
    --r: 2px;                  /* neredeyse duz kose */

    --mega-radius: 4px;
    --mega-bg: #fbfaf7;
    --mega-side-bg: #f4f2ed;
    --mega-border: #e3e0d9;
    --mega-shadow: 0 20px 46px rgba(20, 23, 26, 0.12);
}

body { background: var(--surface); color: var(--ink-2); }

/* ---------- Ust bantlar ---------- */
.top-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-header a, .top-btn { color: #4a5054; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.02em; }
.top-header a:hover, .top-btn:hover { color: var(--ink); background: transparent; }
.top-btn-wa { display: none !important; }
.top-socials a { width: 28px; height: 28px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.top-socials a:hover { border-color: var(--ink); color: var(--ink); }
.lang-toggle { border: 1px solid var(--line); background: transparent; border-radius: var(--r); }
.lang-menu { border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.lang-item.active { background: var(--surface-2); }
.lang-item.active .lang-badge { background: var(--ink); color: #fff !important; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; }
.main-header { background: var(--surface); }
.site-header .logo img { height: 74px; width: auto; }
.site-header.scrolled { background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* ---------- Ana menu: kucuk kapital, ince alt cizgi ---------- */
.nav-menu { gap: 0.5rem; }
.nav-menu > li > a {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--ink); font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    padding: 0.6rem 0.85rem;
    border: 0; border-radius: 0; background: transparent;
    transition: color 0.18s ease;
}
.nav-menu > li > a::after {
    content: ''; display: block; position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 0.35rem; height: 1px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: center;
    transition: transform 0.26s cubic-bezier(0.2,0.7,0.3,1);
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a,
.has-mega.open > .mega-trigger { color: var(--ink); background: transparent; }
.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after,
.has-mega.open > .mega-trigger::after { transform: scaleX(1); }
.nav-menu > li > a .nav-chev { width: 11px; height: 11px; opacity: 0.4; }

.btn-search-toggle { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); }
.btn-search-toggle:hover { border-color: var(--ink); color: var(--ink); }
.btn-call { height: 40px; padding: 0 0.95rem 0 0.28rem; gap: 0.55rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; }
.btn-call:hover { border-color: var(--ink); }
.btn-call .bc-icon { width: 30px; height: 30px; background: var(--ink); color: var(--surface); border: 0; }
/* Ikon `stroke: currentColor` degil, tema renginden geliyordu — koyu daire icinde kayboluyordu */
.btn-call .bc-icon svg { width: 14px; height: 14px; stroke: var(--surface) !important; color: var(--surface) !important; }
.btn-call .bc-label { color: var(--muted-2); font-size: 0.58rem; letter-spacing: 0.13em; }
.btn-call .bc-number { color: var(--ink); font-weight: 600; font-size: 0.85rem; }

/* ---------- Butonlar ---------- */
.btn { border-radius: var(--r); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
.btn-primary { background: var(--ink); color: var(--surface); border: 1px solid var(--ink); box-shadow: none; }
.btn-primary:hover { background: #000; border-color: #000; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--surface); }
.hero .btn-ghost { background: rgba(251,250,247,0.9); }
.hero .btn-ghost:hover { background: var(--ink); color: var(--surface) !important; }

/* ---------- Hero ---------- */
.hero { min-height: 620px; height: 88vh; max-height: 900px; background: var(--surface); }
.slide-overlay {
    background: linear-gradient(95deg,
        rgba(251,250,247,0.97) 0%, rgba(251,250,247,0.93) 36%,
        rgba(251,250,247,0.5) 64%, rgba(251,250,247,0) 90%);
}
.slide-kicker {
    background: transparent; color: var(--muted);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: 0 0 0.35rem; font-size: 0.7rem;
    letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
}
.slide-kicker::before { background: var(--brand); }
.slide-title {
    color: var(--ink); font-family: var(--serif); font-weight: 400;
    letter-spacing: -0.012em;
    font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.08; max-width: 16ch;
}
.slide-title strong { color: var(--ink); font-weight: 600; font-style: italic; }
.slide-desc { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 44ch; }
.slide-arrow { background: transparent; border: 1px solid var(--line); color: var(--ink-2); width: 46px; height: 46px; border-radius: 999px; }
.slide-arrow:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.slide-dots .dot { background: #cdc9c1; }
.slide-dots .dot.active { background: var(--ink); }

/* ---------- Bolum basliklari ---------- */
.section { padding: 6.5rem 0; }
.section-kicker { color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.section-title {
    color: var(--ink); font-family: var(--serif); font-weight: 400;
    letter-spacing: -0.01em; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.16;
}
.section-title .accent { color: var(--ink); font-style: italic; font-weight: 600; }
.section-desc { color: var(--muted); font-size: 0.98rem; line-height: 1.75; }

h2, h3, h4, .about-content h2, .cta-wrap h3 { font-family: var(--serif); font-weight: 400; }

/* ---------- Hakkimizda ---------- */
.about { background: var(--surface); }
.about-visual { height: 540px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 0; box-shadow: none; }
.about-visual-inner img { border-radius: 0; }
.about-visual-badge { background: var(--ink); border: 0; border-radius: var(--r); color: var(--surface); }
.about-visual-badge .num { font-family: var(--serif); }
.about-visual-badge .num span { color: #8fd396 !important; }
.about-visual-badge .lbl { color: rgba(255,255,255,0.66); letter-spacing: 0.1em; font-size: 0.68rem; text-transform: uppercase; }
.about-visual-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.about-visual-card .ac-ico { background: transparent; color: var(--brand); border: 1px solid var(--line); border-radius: 999px; }
.about-visual-card .ac-ttl { color: var(--ink); font-family: var(--serif); }
.about-visual-card .ac-sub { color: var(--muted); }
.about-content .accent { color: var(--ink); font-style: italic; }
.about-content .lead { color: var(--ink-2); font-size: 1.1rem; line-height: 1.7; }
.about-content p { color: var(--muted); line-height: 1.8; }
.about-values li strong { color: var(--ink); font-family: var(--serif); font-weight: 600; }
.about-values li span { color: var(--muted); }
.av-check { background: transparent; border: 1px solid var(--line); border-radius: 999px; }
.av-check::after { border-color: var(--brand); }

.stats-strip { border-radius: var(--r); padding: 2rem 1rem; background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-strip .stat-num { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); }
.stats-strip .stat-lbl { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted) !important; }
.stats-strip .stat-item + .stat-item { border-left-color: var(--line); }

/* ---------- Kartlar: cerceve yok, ayrac cizgi ---------- */
.service-card, .feature-item, .trust-item, .product-card, .proje-card, .blog-card {
    background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: none;
    transition: background 0.2s ease;
}
.service-card:hover, .feature-item:hover, .trust-item:hover,
.product-card:hover, .proje-card:hover, .blog-card:hover {
    background: var(--surface-2); box-shadow: none; transform: none; border-color: var(--line);
}
.service-card h3, .feature-item h4, .trust-item h3 { color: var(--ink); font-family: var(--serif); font-weight: 600; }
.service-card p, .feature-item p, .trust-item p { color: var(--muted); line-height: 1.7; }
.service-icon, .feature-item .ico, .trust-badge { background: transparent; color: var(--brand); border: 1px solid var(--line); border-radius: 999px; }
.service-card:hover .service-icon { background: transparent !important; color: var(--brand); border-color: var(--ink); }
.service-key, .pp-key { color: var(--muted-2); background: transparent; border: 1px solid var(--line); }
.service-detail { color: var(--ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; }
.trust-band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* "Neden biz" bolumu style.css'te KOYU zeminli (--dark-3). Editoryal temada
   kartlar cerceve yerine ayrac cizgili oldugu icin koyu zemin uzerinde metinler
   kayboluyordu — bolum tamamen acik zemine cevrilir. */
.features, #neden-biz { background: var(--surface) !important; }
.features::before, #neden-biz::before { display: none; }
#neden-biz .section-title, .features .section-title { color: var(--ink); }
#neden-biz .section-desc, .features .section-desc { color: var(--muted); }
#neden-biz .section-kicker, .features .section-kicker { color: var(--muted); }
#neden-biz .feature-item h4, .features .feature-item h4 { color: var(--ink); }
#neden-biz .feature-item p, .features .feature-item p { color: var(--muted); }

/* ---------- Surec ---------- */
.process { background: var(--surface-2); }
.process-step { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.process-step:hover { background: transparent; box-shadow: none; }
.ps-no { color: var(--ink); font-family: var(--serif); font-weight: 400; opacity: 0.22; font-size: 3.2rem; }
.ps-icon { color: var(--brand); background: transparent; border: 1px solid var(--line); border-radius: 999px; }
.process-step h4 { color: var(--ink); font-family: var(--serif); }
.process-step p { color: var(--muted); }

/* ---------- CTA ---------- */
.cta-banner { background: var(--ink); }
.cta-wrap h3 { color: var(--surface); font-family: var(--serif); font-weight: 400; }
.cta-wrap p { color: rgba(255,255,255,0.64); }
.cta-banner .btn-primary { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.cta-banner .btn-primary:hover { background: #fff; border-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #a8adb1; }
.site-footer .footer-title { color: var(--surface); font-family: var(--serif); font-weight: 400; font-size: 1rem; }
.site-footer a { color: #a8adb1; }
.site-footer a:hover { color: #fff; }
.footer-newsletter { background: #1c2024; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-bottom { background: #0e1113; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-socials a { border: 1px solid rgba(255,255,255,0.14); color: #a8adb1; border-radius: 999px; }
.footer-socials a:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

/* ---------- Yuzen butonlar ---------- */
.float-actions { right: 22px; gap: 10px; }
.float-btn { width: 50px; height: 50px; border-radius: 999px; border: 0; box-shadow: 0 8px 22px rgba(20,23,26,0.2); transition: transform 0.18s ease; }
.float-btn:hover { transform: translateY(-2px); }
.float-quote { background: var(--ink); }
.float-call { background: var(--brand); }
.float-wa { background: #25a95d; }

.cookie-banner { border-top: 1px solid var(--line); background: var(--surface); }
.search-overlay { background: rgba(20, 23, 26, 0.6); }

/* ==========================================================================
   HIZMETLER — numarali editoryal kayitlar (parts/home/demo4/hizmetler.php)
   ========================================================================== */
.d4-services { background: var(--surface); }
.d4-list { border-top: 1px solid var(--line); }
.d4-item {
    display: grid;
    grid-template-columns: 84px 1fr 340px;
    gap: 2.2rem;
    align-items: center;
    padding: 2rem 0.5rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: background 0.24s ease, padding-left 0.24s ease;
}
.d4-item:hover { background: var(--surface-2); padding-left: 1.1rem; }
.d4-no {
    font-family: var(--serif); font-size: 1.9rem; font-weight: 400;
    color: var(--ink); opacity: 0.22; line-height: 1;
    transition: opacity 0.24s ease;
}
.d4-item:hover .d4-no { opacity: 0.5; }
.d4-body { min-width: 0; }
.d4-name {
    display: block; color: var(--ink);
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.22; letter-spacing: -0.008em;
}
.d4-note { display: block; margin-top: 0.55rem; color: var(--muted); font-size: 0.94rem; line-height: 1.72; max-width: 56ch; }
.d4-meta {
    display: block; margin-top: 0.8rem;
    color: var(--muted-2); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.d4-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.d4-frame {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--surface-3);
}
.d4-frame img { width: 100%; height: 100%; object-fit: cover; display: block;
                filter: saturate(0.86); transition: transform 0.7s cubic-bezier(0.2,0.7,0.3,1), filter 0.4s ease; }
.d4-item:hover .d4-frame img { transform: scale(1.05); filter: saturate(1); }

/* ==========================================================================
   URUNLER — dergi izgarasi (parts/home/demo4/urunler.php)
   ========================================================================== */
.d4-products { background: var(--surface-2); }
.d4-cat + .d4-cat { margin-top: 3.2rem; }
.d4-cat-head {
    display: flex; align-items: baseline; gap: 1rem;
    padding-bottom: 0.7rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.d4-cat-head h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.008em; }
.d4-cat-no { color: var(--muted-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; }
.d4-cat-all {
    margin-left: auto; color: var(--ink); text-decoration: none;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid var(--line); padding-bottom: 2px; white-space: nowrap;
}
.d4-cat-all:hover { border-color: var(--ink); }

.d4-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1.6rem 1.2rem; }
.d4-tile { display: block; text-decoration: none; }
.d4-tile-shot { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-3); }
.d4-tile-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
                    filter: saturate(0.86); transition: transform 0.7s cubic-bezier(0.2,0.7,0.3,1), filter 0.4s ease; }
.d4-tile:hover .d4-tile-shot img { transform: scale(1.05); filter: saturate(1); }
.d4-tile-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.d4-tile-name {
    display: block; margin-top: 0.7rem;
    color: var(--ink); font-family: var(--serif); font-weight: 400;
    font-size: 0.98rem; line-height: 1.4;
}
.d4-tile-line { display: block; width: 26px; height: 1px; background: var(--line); margin-top: 0.55rem; transition: width 0.3s ease, background 0.3s ease; }
.d4-tile:hover .d4-tile-line { width: 52px; background: var(--ink); }

@media (max-width: 1000px) {
    .d4-item { grid-template-columns: 60px 1fr 220px; gap: 1.4rem; }
    .d4-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .d4-item { grid-template-columns: 46px 1fr; gap: 1rem; padding: 1.5rem 0.4rem; }
    .d4-strip { display: none; }
    .d4-cat-head { flex-wrap: wrap; }
    .d4-cat-all { margin-left: 0; width: 100%; }
    .d4-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem 0.9rem; }
}