/* =================================================================
   HİZMET NAKLİYAT — Tasarım Sistemi
   Konsept: "Yolculuk" — gece laciverti + amber gradyan, rota çizgileri
   Mobil öncelikli, erişilebilir, akıcı animasyonlar
   ================================================================= */

/* ---------- 1. DEĞİŞKENLER ---------- */
:root {
    /* Renkler */
    --gece:        #0a1330;   /* ana koyu */
    --gece-2:      #111c44;   /* kart koyu */
    --gece-3:      #1b2a5e;
    --amber:       #ff7a18;   /* ana vurgu */
    --amber-2:     #ffb347;
    --amber-koyu:  #e85d04;
    --altin:       #ffd166;
    --turkuaz:     #19c9c9;
    --beyaz:       #ffffff;
    --acik:        #f4f6fc;
    --gri:         #6b7494;
    --gri-acik:    #aeb6d4;
    --cizgi:       rgba(255,255,255,.10);
    --whatsapp:    #25d366;

    /* Metin (açık zemin) */
    --metin:       #18203f;
    --metin-2:     #555f82;

    /* Gradyanlar */
    --grad-amber:  linear-gradient(135deg, #ff7a18 0%, #ff5e62 100%);
    --grad-gece:   linear-gradient(160deg, #0a1330 0%, #16224f 100%);
    --grad-isik:   radial-gradient(1200px 600px at 80% -10%, rgba(255,122,24,.18), transparent 60%);

    /* Tipografi */
    --font-baslik: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-metin:  'Inter', system-ui, sans-serif;

    /* Ölçü */
    --kapsa:       1200px;
    --r-sm:        12px;
    --r:           18px;
    --r-lg:        28px;
    --golge:       0 18px 50px -20px rgba(8,15,40,.45);
    --golge-amber: 0 18px 40px -14px rgba(255,122,24,.55);
    --gecis:       .35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. SIFIRLAMA ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-metin);
    color: var(--metin);
    background: var(--acik);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img,svg,video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-baslik); line-height: 1.15; font-weight: 800; color: var(--metin); letter-spacing: -.02em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.kapsayici { width: min(100% - 2.4rem, var(--kapsa)); margin-inline: auto; }
.ikon-sm { width: 1.05em; height: 1.05em; fill: currentColor; flex-shrink: 0; vertical-align: -2px; }

/* ---------- 3. PROGRESS & ÜST ŞERİT ---------- */
.sayfa-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--grad-amber); z-index: 9999; transition: width .1s linear;
}
.ust-serit {
    background: var(--gece); color: var(--gri-acik);
    font-size: .82rem; border-bottom: 1px solid var(--cizgi);
}
.ust-serit__ic { display: flex; align-items: center; gap: 1.4rem; justify-content: flex-end; height: 38px; }
.ust-serit__oge { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ust-serit__tel { color: var(--amber-2); font-weight: 600; }
.ust-serit__tel:hover { color: var(--amber); }
@media (max-width: 720px){
    .ust-serit__ic { justify-content: center; gap: 1rem; }
    .ust-serit__oge--gizle { display: none; }
    .ust-serit__oge:first-child { display: none; }
}

/* ---------- 4. ANA MENÜ ---------- */
.ust {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(20,30,70,.08);
    transition: box-shadow var(--gecis), background var(--gecis);
}
.ust.kucuk { box-shadow: 0 10px 30px -18px rgba(10,19,48,.5); background: rgba(255,255,255,.94); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1rem; }

.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo__isaret {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--grad-amber); color: #fff; box-shadow: var(--golge-amber);
    transition: transform var(--gecis);
}
.logo:hover .logo__isaret { transform: rotate(-8deg) scale(1.05); }
.logo__yazi { font-family: var(--font-baslik); font-weight: 800; font-size: 1.32rem; line-height: 1; letter-spacing: -.03em; }
.logo__yazi strong { color: var(--metin); }
.logo__yazi span { color: var(--amber-koyu); }

.nav__liste { display: flex; align-items: center; gap: .35rem; }
.nav__liste a {
    display: block; padding: .55rem .9rem; border-radius: 10px; font-weight: 600; font-size: .96rem;
    color: var(--metin); position: relative; transition: color var(--gecis), background var(--gecis);
}
.nav__liste a::after {
    content: ""; position: absolute; left: 50%; bottom: .35rem; width: 0; height: 2px;
    background: var(--grad-amber); border-radius: 2px; transform: translateX(-50%); transition: width var(--gecis);
}
.nav__liste a:hover { color: var(--amber-koyu); }
.nav__liste a:hover::after,
.nav__liste a.aktif::after { width: 22px; }
.nav__liste a.aktif { color: var(--amber-koyu); }
.nav__kapat, .nav__tel-mobil { display: none; }

.ust__aksiyon { display: flex; align-items: center; gap: .6rem; }

/* ---------- 5. BUTONLAR ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-baslik); font-weight: 700; font-size: .96rem;
    padding: .82rem 1.5rem; border-radius: 999px; line-height: 1; white-space: nowrap;
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), color var(--gecis);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--dolu { background: var(--grad-amber); color: #fff; box-shadow: var(--golge-amber); }
.btn--dolu:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(255,122,24,.7); }
.btn--cizgi { background: transparent; color: var(--metin); border: 1.6px solid rgba(20,30,70,.18); }
.btn--cizgi:hover { border-color: var(--amber); color: var(--amber-koyu); }
.btn--beyaz { background: #fff; color: var(--gece); box-shadow: var(--golge); }
.btn--beyaz:hover { transform: translateY(-3px); }
.btn--whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 16px 34px -14px rgba(37,211,102,.7); }
.btn--whatsapp:hover { transform: translateY(-3px); filter: brightness(1.05); }
.btn--kucuk { padding: .62rem 1.1rem; font-size: .9rem; }
.btn--buyuk { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--tam { width: 100%; }
.btn--cizgi-beyaz { border: 1.6px solid rgba(255,255,255,.3); color: #fff; }
.btn--cizgi-beyaz:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.btn--tel-masa span { display: inline; }

/* hamburger */
.nav-ac { display: none; width: 46px; height: 46px; border-radius: 12px; position: relative; background: rgba(20,30,70,.06); }
.nav-ac span { position: absolute; left: 12px; width: 22px; height: 2.4px; background: var(--metin); border-radius: 2px; transition: transform .3s, opacity .3s, top .3s; }
.nav-ac span:nth-child(1){ top: 16px; } .nav-ac span:nth-child(2){ top: 22px; } .nav-ac span:nth-child(3){ top: 28px; }
body.menu-acik .nav-ac span:nth-child(1){ top: 22px; transform: rotate(45deg); }
body.menu-acik .nav-ac span:nth-child(2){ opacity: 0; }
body.menu-acik .nav-ac span:nth-child(3){ top: 22px; transform: rotate(-45deg); }

/* ---------- 6. BÖLÜM BAŞLIKLARI ---------- */
section { position: relative; }
.bolum { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.bolum-bas { max-width: 640px; margin: 0 auto clamp(2rem,5vw,3.2rem); text-align: center; }
.bolum-bas--sol { margin-inline: 0; text-align: left; }
.etiket {
    display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-baslik);
    font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--amber-koyu); background: rgba(255,122,24,.1); padding: .42rem .9rem;
    border-radius: 999px; margin-bottom: 1rem;
}
.etiket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.bolum-bas h2 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); margin-bottom: .8rem; }
.bolum-bas p { color: var(--metin-2); font-size: 1.05rem; }
.vurgu { color: var(--amber-koyu); }
.vurgu-cizgi { position: relative; white-space: nowrap; }
.vurgu-cizgi::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: .08em; height: .32em;
    background: linear-gradient(90deg, rgba(255,122,24,.45), rgba(255,179,71,.45)); z-index: -1; border-radius: 4px;
}

/* ---------- 7. HERO ---------- */
.hero {
    position: relative; background: var(--grad-gece); color: #fff; overflow: hidden;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(7rem, 12vw, 10rem);
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-isik); pointer-events: none; }
.hero__izgara {
    position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 25%, #000, transparent 78%);
}
.hero__rota { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.hero__rota path { stroke-dasharray: 8 10; animation: rotaKay 22s linear infinite; }
@keyframes rotaKay { to { stroke-dashoffset: -360; } }

.hero__ic { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero__sol { max-width: 600px; }
.hero__rozet {
    display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.08);
    border: 1px solid var(--cizgi); padding: .5rem 1rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; margin-bottom: 1.5rem; backdrop-filter: blur(6px);
}
.hero__rozet b { color: var(--altin); }
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.7rem); color: #fff; line-height: 1.08; }
.hero h1 .renkli { background: linear-gradient(120deg, var(--amber-2), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__alt { color: var(--gri-acik); font-size: clamp(1rem,2.4vw,1.18rem); margin: 1.3rem 0 2rem; max-width: 520px; }
.hero__btnlar { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__guven { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem; }
.hero__guven-oge { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--gri-acik); }
.hero__guven-oge svg { color: var(--turkuaz); width: 1.3em; height: 1.3em; }

/* Hero görsel kartı */
.hero__gorsel { position: relative; }
.hero__kart {
    position: relative; background: rgba(255,255,255,.06); border: 1px solid var(--cizgi);
    border-radius: var(--r-lg); padding: 1.6rem; backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.hero__truck {
    aspect-ratio: 4/3; border-radius: var(--r); background:
        radial-gradient(120% 120% at 20% 0%, #20305f, #0c1740);
    display: grid; place-items: center; overflow: hidden; position: relative;
}
.hero__truck svg { width: 62%; color: var(--amber); filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); animation: sallan 4s ease-in-out infinite; }
@keyframes sallan { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
.hero__truck::after { content: ""; position: absolute; bottom: 18%; width: 60%; height: 14px; background: rgba(0,0,0,.35); filter: blur(10px); border-radius: 50%; animation: golgePuls 4s ease-in-out infinite; }
@keyframes golgePuls { 0%,100%{ transform: scaleX(1); opacity:.35 } 50%{ transform: scaleX(.82); opacity:.2 } }

.hero__yuzen-kart {
    position: absolute; display: flex; align-items: center; gap: .7rem;
    background: rgba(255,255,255,.96); color: var(--metin); padding: .8rem 1rem; border-radius: 14px;
    box-shadow: var(--golge); font-weight: 700; font-size: .9rem;
}
.hero__yuzen-kart svg { width: 2rem; height: 2rem; padding: .4rem; border-radius: 10px; background: var(--grad-amber); color: #fff; }
.hero__yuzen-kart small { display: block; font-weight: 500; color: var(--metin-2); font-size: .78rem; }
.hero__yuzen-kart--1 { top: 8%; left: -6%; animation: yuz 5s ease-in-out infinite; }
.hero__yuzen-kart--2 { bottom: 10%; right: -5%; animation: yuz 5s ease-in-out .8s infinite; }
@keyframes yuz { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }

.hero__dalga { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero__dalga svg { width: 100%; height: clamp(40px, 7vw, 90px); }

/* ---------- 8. İSTATİSTİK ŞERİDİ ---------- */
.istat { margin-top: clamp(-5rem, -8vw, -7rem); position: relative; z-index: 5; }
.istat__izgara {
    background: #fff; border-radius: var(--r-lg); box-shadow: var(--golge);
    display: grid; grid-template-columns: repeat(4,1fr); padding: 2rem 1rem;
    border: 1px solid rgba(20,30,70,.06);
}
.istat__oge { text-align: center; padding: .4rem 1rem; position: relative; }
.istat__oge:not(:last-child)::after { content:""; position:absolute; right:0; top:15%; height:70%; width:1px; background: rgba(20,30,70,.08); }
.istat__sayi { font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.9rem,4.5vw,2.7rem); color: var(--gece); line-height: 1; }
.istat__sayi span { color: var(--amber-koyu); }
.istat__etiket { color: var(--metin-2); font-size: .9rem; margin-top: .4rem; font-weight: 500; }

/* ---------- 9. HİZMET KARTLARI ---------- */
.hizmet-izgara { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.hizmet-kart {
    position: relative; background: #fff; border: 1px solid rgba(20,30,70,.07);
    border-radius: var(--r-lg); padding: 2rem 1.7rem; overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.hizmet-kart::before {
    content: ""; position: absolute; inset: 0; background: var(--grad-gece); opacity: 0; transition: opacity var(--gecis); z-index: 0;
}
.hizmet-kart > * { position: relative; z-index: 1; }
.hizmet-kart:hover { transform: translateY(-8px); box-shadow: var(--golge); border-color: transparent; }
.hizmet-kart:hover::before { opacity: 1; }
.hizmet-kart:hover h3, .hizmet-kart:hover p { color: #fff; }
.hizmet-kart:hover .hizmet-kart__link { color: var(--amber-2); }
.hizmet-kart__ikon {
    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(255,122,24,.12); color: var(--amber-koyu); margin-bottom: 1.2rem;
    transition: transform var(--gecis), background var(--gecis);
}
.hizmet-kart__ikon svg { width: 30px; height: 30px; }
.hizmet-kart:hover .hizmet-kart__ikon { background: var(--grad-amber); color: #fff; transform: rotate(-6deg) scale(1.08); }
.hizmet-kart h3 { font-size: 1.25rem; margin-bottom: .6rem; transition: color var(--gecis); }
.hizmet-kart p { color: var(--metin-2); font-size: .96rem; transition: color var(--gecis); }
.hizmet-kart__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-weight: 700; font-family: var(--font-baslik); color: var(--amber-koyu); font-size: .92rem; transition: gap var(--gecis), color var(--gecis); }
.hizmet-kart__link svg { width: 1.1em; height: 1.1em; }
.hizmet-kart:hover .hizmet-kart__link { gap: .75rem; }
.hizmet-kart__no { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--font-baslik); font-weight: 800; font-size: 2.6rem; color: rgba(20,30,70,.05); z-index: 0; transition: color var(--gecis); }
.hizmet-kart:hover .hizmet-kart__no { color: rgba(255,255,255,.08); }

/* ---------- 10. SÜREÇ (ADIMLAR) ---------- */
.surec { background: var(--gece); color: #fff; overflow: hidden; }
.surec .bolum-bas h2 { color: #fff; }
.surec .bolum-bas p { color: var(--gri-acik); }
.surec__izgara { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position: relative; }
.surec__cizgi { position: absolute; top: 38px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 20px); opacity: .4; }
.surec__adim { text-align: center; position: relative; padding: 0 .5rem; }
.surec__no {
    width: 76px; height: 76px; margin: 0 auto 1.2rem; border-radius: 22px; display: grid; place-items: center;
    background: var(--gece-2); border: 1px solid var(--cizgi); font-family: var(--font-baslik);
    font-weight: 800; font-size: 1.7rem; color: var(--amber-2); position: relative; transition: transform var(--gecis);
}
.surec__adim:hover .surec__no { transform: translateY(-6px) scale(1.05); background: var(--grad-amber); color: #fff; border-color: transparent; box-shadow: var(--golge-amber); }
.surec__adim h3 { color: #fff; font-size: 1.15rem; margin-bottom: .5rem; }
.surec__adim p { color: var(--gri-acik); font-size: .92rem; }

/* ---------- 11. NEDEN BİZ (özellikler) ---------- */
.ozellik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.ozellik-liste { display: grid; gap: 1.2rem; }
.ozellik-oge { display: flex; gap: 1.1rem; padding: 1.2rem; border-radius: var(--r); background: #fff; border: 1px solid rgba(20,30,70,.06); transition: transform var(--gecis), box-shadow var(--gecis); }
.ozellik-oge:hover { transform: translateX(6px); box-shadow: var(--golge); }
.ozellik-oge__ikon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(255,122,24,.12); color: var(--amber-koyu); }
.ozellik-oge__ikon svg { width: 26px; height: 26px; }
.ozellik-oge h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.ozellik-oge p { color: var(--metin-2); font-size: .93rem; }

.ozellik-gorsel { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; background: var(--grad-gece); box-shadow: var(--golge); display: grid; place-items: center; padding: 2rem; }
.ozellik-gorsel__halka { position: absolute; border-radius: 50%; border: 1px solid var(--cizgi); }
.ozellik-gorsel__halka.h1 { width: 80%; height: 80%; animation: don 30s linear infinite; }
.ozellik-gorsel__halka.h2 { width: 55%; height: 55%; animation: don 22s linear infinite reverse; }
@keyframes don { to { transform: rotate(360deg); } }
.ozellik-gorsel__merkez { position: relative; text-align: center; color: #fff; z-index: 2; }
.ozellik-gorsel__merkez .puan { font-family: var(--font-baslik); font-size: 4rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg,var(--amber-2),var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ozellik-gorsel__merkez .yildizlar { color: var(--altin); font-size: 1.3rem; letter-spacing: 2px; margin: .4rem 0; }
.ozellik-gorsel__merkez p { color: var(--gri-acik); }
.ozellik-gorsel__rozet { position: absolute; background: rgba(255,255,255,.96); color: var(--metin); padding: .6rem .9rem; border-radius: 12px; font-weight: 700; font-size: .85rem; box-shadow: var(--golge); display: flex; align-items: center; gap: .5rem; }
.ozellik-gorsel__rozet svg { color: var(--amber-koyu); width: 1.2em; height: 1.2em; }
.ozellik-gorsel__rozet.r1 { top: 12%; left: 8%; animation: yuz 6s ease-in-out infinite; }
.ozellik-gorsel__rozet.r2 { bottom: 14%; right: 6%; animation: yuz 6s ease-in-out 1s infinite; }
.ozellik-gorsel__rozet.r3 { bottom: 30%; left: 4%; animation: yuz 6s ease-in-out .5s infinite; }

/* ---------- 12. BÖLGE / HARİTA ---------- */
.bolge { background: linear-gradient(180deg, #fff, var(--acik)); }
.bolge__izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.bolge__mahalleler { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.mahalle-cip { background: #fff; border: 1px solid rgba(20,30,70,.1); padding: .5rem 1rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--metin-2); transition: all var(--gecis); }
.mahalle-cip:hover { background: var(--grad-amber); color: #fff; border-color: transparent; transform: translateY(-2px); }
.bolge__harita { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--golge); border: 6px solid #fff; aspect-ratio: 4/3; }
.bolge__harita iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }

/* ---------- 13. YORUMLAR ---------- */
.yorumlar { background: var(--gece); color: #fff; overflow: hidden; }
.yorumlar .bolum-bas h2 { color: #fff; }
.yorumlar .bolum-bas p { color: var(--gri-acik); }
.yorum-izgara { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.yorum-kart { background: var(--gece-2); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 1.8rem; position: relative; transition: transform var(--gecis), border-color var(--gecis); }
.yorum-kart:hover { transform: translateY(-6px); border-color: rgba(255,122,24,.4); }
.yorum-kart__tirnak { position: absolute; top: 1.2rem; right: 1.4rem; color: rgba(255,122,24,.25); }
.yorum-kart__tirnak svg { width: 2.4rem; height: 2.4rem; }
.yorum-kart__yildiz { color: var(--altin); letter-spacing: 2px; margin-bottom: .9rem; }
.yorum-kart p { color: var(--gri-acik); font-size: .98rem; }
.yorum-kart__kisi { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--cizgi); }
.yorum-kart__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-baslik); font-weight: 800; color: #fff; background: var(--grad-amber); }
.yorum-kart__kisi strong { display: block; color: #fff; font-size: .95rem; }
.yorum-kart__kisi small { color: var(--gri); }

/* ---------- 14. CTA ŞERİDİ ---------- */
.cta-serit { background: var(--grad-amber); color: #fff; position: relative; overflow: hidden; }
.cta-serit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 120%, rgba(255,255,255,.2), transparent); }
.cta-serit__ic { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.2rem,5vw,3.4rem) 0; flex-wrap: wrap; }
.cta-serit__yazi h2 { color: #fff; font-size: clamp(1.6rem,4vw,2.3rem); }
.cta-serit__yazi p { color: rgba(255,255,255,.92); font-size: 1.05rem; margin-top: .3rem; }
.cta-serit__btn { display: flex; gap: .9rem; flex-wrap: wrap; }
.cta-serit .btn--dolu { background: var(--gece); box-shadow: 0 16px 34px -14px rgba(10,19,48,.6); }
.cta-serit .btn--whatsapp { background: #fff; color: var(--whatsapp); }

/* ---------- 15. ALT BİLGİ ---------- */
.alt { background: var(--gece); color: var(--gri-acik); padding-top: clamp(3rem,6vw,4.5rem); }
.alt__ust { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; }
.logo--alt .logo__yazi strong, .logo--alt .logo__yazi span { color: #fff; }
.logo--alt .logo__yazi span { color: var(--amber-2); }
.alt__aciklama { margin: 1.2rem 0; font-size: .95rem; max-width: 340px; }
.alt__rozet { display: flex; flex-wrap: wrap; gap: .6rem; }
.rozet { display: inline-flex; align-items: center; gap: .4rem; background: var(--gece-2); border: 1px solid var(--cizgi); padding: .45rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #fff; }
.rozet svg { color: var(--amber-2); }
.alt__sutun h3 { color: #fff; font-size: 1.05rem; margin-bottom: 1.2rem; }
.alt__sutun ul { display: grid; gap: .7rem; }
.alt__sutun a, .alt__iletisim span { font-size: .94rem; transition: color var(--gecis), padding var(--gecis); }
.alt__sutun a:hover { color: var(--amber-2); padding-left: 4px; }
.alt__iletisim li { display: flex; gap: .7rem; align-items: flex-start; }
.alt__iletisim svg { color: var(--amber-2); margin-top: .25rem; }
.alt__iletisim .btn { margin-top: 1.2rem; }
.alt__cizgi { height: 1px; background: var(--cizgi); }
.alt__telif { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; flex-wrap: wrap; font-size: .85rem; }
.alt__telif strong { color: #fff; }
.alt__seo a { color: var(--gri); }
.alt__seo a:hover { color: var(--amber-2); }

/* ---------- 16. YÜZEN BUTONLAR ---------- */
.yuzen { position: fixed; right: 16px; bottom: 18px; z-index: 850; display: flex; flex-direction: column; gap: .7rem; }
.yuzen__btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--golge); position: relative; transition: transform var(--gecis); }
.yuzen__btn:hover { transform: scale(1.1); }
.yuzen__wa { background: var(--whatsapp); }
.yuzen__ara { background: var(--grad-amber); }
.yuzen__nabiz { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: nabiz 2s infinite; }
@keyframes nabiz { 70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

.yukari { position: fixed; left: 16px; bottom: 18px; z-index: 840; width: 46px; height: 46px; border-radius: 12px; background: var(--gece); color: #fff; display: grid; place-items: center; box-shadow: var(--golge); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--gecis); }
.yukari.gorun { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background: var(--amber-koyu); }

/* ---------- 17. İÇ SAYFA BAŞLIĞI ---------- */
.sayfa-bas { background: var(--grad-gece); color: #fff; position: relative; overflow: hidden; padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); }
.sayfa-bas::before { content: ""; position: absolute; inset: 0; background: var(--grad-isik); }
.sayfa-bas__izgara { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 70% 0%, #000, transparent 75%); }
.sayfa-bas__ic { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.sayfa-bas h1 { color: #fff; font-size: clamp(2rem,5vw,3.2rem); margin-bottom: .8rem; }
.sayfa-bas p { color: var(--gri-acik); font-size: 1.08rem; }
.firin { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; font-size: .9rem; color: var(--gri-acik); margin-top: 1.4rem; }
.firin a:hover { color: var(--amber-2); }
.firin span { color: var(--gri); }
.firin b { color: var(--amber-2); font-weight: 600; }

/* ---------- 18. İÇERİK BLOKLARI (iç sayfalar) ---------- */
.icerik-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.icerik-blok--ters .icerik-blok__gorsel { order: -1; }
.icerik-blok__gorsel { border-radius: var(--r-lg); overflow: hidden; min-height: 360px; background: var(--grad-gece); position: relative; display: grid; place-items: center; box-shadow: var(--golge); }
.icerik-blok__gorsel svg { width: 45%; color: var(--amber); opacity: .9; }
.icerik-metin h2 { font-size: clamp(1.6rem,3.5vw,2.2rem); margin-bottom: 1rem; }
.icerik-metin p { color: var(--metin-2); margin-bottom: 1rem; }
.kontrol-liste { display: grid; gap: .8rem; margin: 1.4rem 0; }
.kontrol-liste li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.kontrol-liste svg { width: 22px; height: 22px; flex-shrink: 0; color: #fff; background: var(--whatsapp); border-radius: 50%; padding: 3px; margin-top: .15rem; }

/* Değer kartları (hakkımızda) */
.deger-izgara { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.deger-kart { background: #fff; border: 1px solid rgba(20,30,70,.07); border-radius: var(--r-lg); padding: 2rem; text-align: center; transition: transform var(--gecis), box-shadow var(--gecis); }
.deger-kart:hover { transform: translateY(-6px); box-shadow: var(--golge); }
.deger-kart__ikon { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 18px; display: grid; place-items: center; background: var(--grad-amber); color: #fff; box-shadow: var(--golge-amber); }
.deger-kart__ikon svg { width: 32px; height: 32px; }
.deger-kart h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.deger-kart p { color: var(--metin-2); font-size: .95rem; }

/* ---------- 19. GALERİ ---------- */
.galeri-izgara { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.galeri-oge { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; background: var(--grad-gece); display: grid; place-items: center; cursor: pointer; }
.galeri-oge:nth-child(4n) { grid-column: span 2; aspect-ratio: 8/3; }
.galeri-oge svg { width: 38%; color: rgba(255,122,24,.6); transition: transform var(--gecis); }
.galeri-oge:hover svg { transform: scale(1.1); }
.galeri-oge__kapak { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,19,48,.9)); display: flex; align-items: flex-end; padding: 1.2rem; opacity: 0; transition: opacity var(--gecis); }
.galeri-oge:hover .galeri-oge__kapak { opacity: 1; }
.galeri-oge__kapak strong { color: #fff; font-family: var(--font-baslik); }
.galeri-oge__kapak small { display: block; color: var(--gri-acik); font-size: .82rem; }

/* ---------- 20. SSS (Akordeon) ---------- */
.sss-sarmal { max-width: 820px; margin: 0 auto; display: grid; gap: 1rem; }
.sss-oge { background: #fff; border: 1px solid rgba(20,30,70,.08); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--gecis), border-color var(--gecis); }
.sss-oge.acik { box-shadow: var(--golge); border-color: rgba(255,122,24,.3); }
.sss-soru { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; text-align: left; font-family: var(--font-baslik); font-weight: 700; font-size: 1.05rem; color: var(--metin); }
.sss-soru__art { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: rgba(255,122,24,.12); color: var(--amber-koyu); display: grid; place-items: center; font-size: 1.4rem; transition: transform var(--gecis), background var(--gecis), color var(--gecis); }
.sss-oge.acik .sss-soru__art { transform: rotate(45deg); background: var(--grad-amber); color: #fff; }
.sss-cevap { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.sss-cevap__ic { padding: 0 1.5rem 1.4rem; color: var(--metin-2); }

/* ---------- 21. İLETİŞİM ---------- */
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: start; }
.iletisim-bilgi { display: grid; gap: 1rem; }
.iletisim-kart { display: flex; gap: 1rem; padding: 1.4rem; background: #fff; border: 1px solid rgba(20,30,70,.07); border-radius: var(--r); transition: transform var(--gecis), box-shadow var(--gecis); }
.iletisim-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.iletisim-kart__ikon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(255,122,24,.12); color: var(--amber-koyu); }
.iletisim-kart__ikon svg { width: 26px; height: 26px; }
.iletisim-kart h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.iletisim-kart a, .iletisim-kart p { color: var(--metin-2); font-size: .96rem; }
.iletisim-kart a:hover { color: var(--amber-koyu); }

.form-kart { background: #fff; border: 1px solid rgba(20,30,70,.07); border-radius: var(--r-lg); padding: clamp(1.5rem,4vw,2.4rem); box-shadow: var(--golge); }
.form-kart h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.form-kart > p { color: var(--metin-2); margin-bottom: 1.6rem; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-alan { margin-bottom: 1.1rem; }
.form-alan label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.form-alan input, .form-alan select, .form-alan textarea {
    width: 100%; padding: .85rem 1rem; border: 1.6px solid rgba(20,30,70,.14); border-radius: 12px;
    font-family: inherit; font-size: .98rem; color: var(--metin); background: #fff; transition: border-color var(--gecis), box-shadow var(--gecis);
}
.form-alan textarea { resize: vertical; min-height: 120px; }
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255,122,24,.12); }
.form-not { font-size: .85rem; color: var(--gri); margin-top: 1rem; text-align: center; }
.form-mesaj { padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; font-weight: 600; font-size: .95rem; display: none; }
.form-mesaj.basarili { display: block; background: rgba(37,211,102,.12); color: #128a3e; border: 1px solid rgba(37,211,102,.3); }
.form-mesaj.hata { display: block; background: rgba(255,75,75,.1); color: #c0271a; border: 1px solid rgba(255,75,75,.3); }

/* ---------- 22. SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.gor { opacity: 1; transform: none; }
.reveal[data-gecik="1"]{ transition-delay: .1s; }
.reveal[data-gecik="2"]{ transition-delay: .2s; }
.reveal[data-gecik="3"]{ transition-delay: .3s; }
.reveal[data-gecik="4"]{ transition-delay: .4s; }

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width: 980px){
    .hero__ic { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero__gorsel { max-width: 440px; margin: 0 auto; width: 100%; }
    .ozellik-izgara, .bolge__izgara, .icerik-blok, .iletisim-izgara { grid-template-columns: 1fr; gap: 2rem; }
    .icerik-blok--ters .icerik-blok__gorsel { order: 0; }
    .hizmet-izgara, .yorum-izgara, .deger-izgara, .galeri-izgara { grid-template-columns: repeat(2,1fr); }
    .surec__izgara { grid-template-columns: repeat(2,1fr); gap: 2rem; }
    .surec__cizgi { display: none; }
    .alt__ust { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .galeri-oge:nth-child(4n) { grid-column: span 2; aspect-ratio: 16/6; }
}

@media (max-width: 860px){
    /* Mobil menü */
    .nav {
        position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px);
        background: var(--gece); flex-direction: column; align-items: stretch; padding: 5rem 1.6rem 2rem;
        transform: translateX(105%); transition: transform .4s cubic-bezier(.22,.61,.36,1); z-index: 950;
        box-shadow: -20px 0 60px -20px rgba(0,0,0,.5); display: flex;
    }
    body.menu-acik .nav { transform: translateX(0); }
    .nav__liste { flex-direction: column; align-items: stretch; gap: .2rem; }
    .nav__liste a { color: #fff; padding: .9rem 1rem; border-radius: 12px; font-size: 1.08rem; }
    .nav__liste a::after { display: none; }
    .nav__liste a:hover, .nav__liste a.aktif { background: var(--gece-2); color: var(--amber-2); }
    .nav__kapat { display: block; position: absolute; top: 1rem; right: 1.2rem; font-size: 2.2rem; color: #fff; line-height: 1; }
    .nav__tel-mobil { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; padding: 1rem; border-radius: 12px; background: var(--grad-amber); color: #fff; font-weight: 700; font-family: var(--font-baslik); }
    .nav-ac { display: block; }
    .btn--tel-masa { display: none; }
    .nav-perde { position: fixed; inset: 0; background: rgba(8,12,30,.55); backdrop-filter: blur(2px); z-index: 940; opacity: 0; transition: opacity .4s; }
    body.menu-acik .nav-perde { opacity: 1; }
}

@media (max-width: 680px){
    .kapsayici { width: min(100% - 1.8rem, var(--kapsa)); }
    .istat__izgara { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; padding: 1.6rem .5rem; }
    .istat__oge:nth-child(2)::after { display: none; }
    .istat__oge:nth-child(1)::before, .istat__oge:nth-child(2)::before { content:""; }
    .hizmet-izgara, .yorum-izgara, .deger-izgara, .galeri-izgara, .surec__izgara { grid-template-columns: 1fr; }
    .galeri-oge:nth-child(4n) { grid-column: span 1; aspect-ratio: 4/3; }
    .form-satir { grid-template-columns: 1fr; }
    .alt__ust { grid-template-columns: 1fr; }
    .cta-serit__ic { flex-direction: column; text-align: center; align-items: stretch; }
    .cta-serit__btn { justify-content: center; }
    .hero__yuzen-kart--1 { left: 0; top: 4%; }
    .hero__yuzen-kart--2 { right: 0; bottom: 4%; }
    .btn--buyuk { width: 100%; }
    .hero__btnlar { flex-direction: column; }
    .hero__btnlar .btn { width: 100%; }
}

@media (max-width: 420px){
    .ust__ic { height: 64px; }
    .logo__yazi { font-size: 1.15rem; }
    .logo__isaret { width: 40px; height: 40px; }
    .yuzen__btn { width: 52px; height: 52px; }
}

/* ---------- 24. ERİŞİLEBİLİRLİK ---------- */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Yazdırma */
@media print {
    .ust, .ust-serit, .yuzen, .yukari, .cta-serit, .nav-ac { display: none; }
}