/* ===========================================================================
   KacaGiderim — site stilleri
   ---------------------------------------------------------------------------
   Bootstrap 4.0.0-beta.2 + jQuery + Popper + WOW + animate.css yigini
   BIRAKILDI. O yigin 177 KB JS yukluyor ve siteden yalnizca izgara, birkac
   spacing utility'si, bir smooth-scroll ve fade-in kullaniliyordu; hepsi
   bugun CSS ile karsilaniyor. Bu dosya tek basina yeterli, JavaScript YOK.
   Ayrica tema vendor bootstrap.min.css'in ICINE derlenmisti; onu guncellemek
   temayi sifirdan uretmek demekti. Artik o bagimlilik da yok.

   Tasarim dili uygulamadan geliyor: lacivert zemin, turuncu vurgu. Magaza
   ekran goruntuleri de lacivert oldugu icin acik zeminde yapisik duruyorlardi.
   =========================================================================== */

:root {
    --navy-900: #0b1020;
    --navy-850: #0f1528;
    --navy-800: #131a33;
    --navy-700: #1b2444;
    --navy-600: #243057;
    --orange:   #ffb300;
    --orange-d: #e39f00;
    --text:     #e9edf7;
    --muted:    #9aa7c2;
    --line:     rgba(255, 255, 255, .10);
    --radius:   16px;
    --wrap:     1140px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
}

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

html {
    scroll-behavior: smooth;           /* jquery.easing yerine */
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

html, body { max-width: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--navy-900);
    line-height: 1.65;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: #fff; }

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

/* --- Baslik tipografisi: clamp ile akici, breakpoint'e ihtiyac yok -------- */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p  { margin: 0 0 1rem; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--muted); }
.accent { color: var(--orange); }

/* --- Ust cubuk ------------------------------------------------------------ */
.nav {
    position: sticky;             /* fixed-top + top:-100px hatasi yok */
    top: 0;
    z-index: 50;
    background: rgba(11, 16, 32, .88);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav-in {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 60px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.12rem;
    color: #fff;
    letter-spacing: -.02em;
    margin-right: auto;
}
.brand:hover { color: #fff; }
.nav-links { display: flex; gap: 20px; align-items: center; min-width: 0; overflow-x: auto;
             scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { white-space: nowrap; }
.nav-links a { color: var(--muted); font-size: .94rem; font-weight: 600; }
.nav-links a:hover { color: var(--orange); }
@media (max-width: 720px) {
    /* Hamburger YOK: menu kisa, kaydirilabilir bir seride duruyor.
       Eskiden bir hamburger dugmesi vardi ama hedefi hic tanimli degildi. */
    .nav-in { min-height: 54px; gap: 14px; }
    /* "KaçaGiderim" ile ilk menu basligi ic ice giriyordu. Once boslugu
       10 -> 20px yaptim, yetmedi; ustelik menu seridinin sol kenarina
       koydugum maske ilk basligi soluklastirdigi icin iki taraf daha da
       birbirine karismis gorunuyordu.
       Simdi ayrim goze carpiyor: markanin sagina 14px ic bosluk + ince bir
       cizgi, 14px izgara boslugu ve menude 10px ic bosluk -> arada 39px'lik
       net bir serit.
       Cizgi MARKANIN uzerinde, menunun degil: menu overflow-x ile kayan bir
       kutu, kenarligi orada icerik kaydikca uzerine biner. */
    .brand {
        font-size: 1rem;
        gap: 8px;
        padding-right: 14px;
        border-right: 1px solid var(--line);
    }
    .nav-links {
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Kayan icerik cizgiye dayanmadan sonsun. padding-left maskeyle ayni
           olculde: boylece kaydirma basindayken ilk baslik maskenin disinda
           kalip TAM opak duruyor (10px'lik maske icinde kalinca ilk harf
           soluyordu, 320px ve Ingilizce'de goze batiyordu), kaydirildiginda
           ise icerik solarak cizginin altina giriyor. */
        padding-left: 10px;
        mask-image: linear-gradient(90deg, transparent 0, #000 10px);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px);
    }
    .nav-links a { font-size: .86rem; white-space: nowrap; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    /* 100vh yoktu iyi oldu: mobil adres cubugu icerigi kirpiyordu */
    padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 96px);
    background:
        radial-gradient(1100px 520px at 15% -10%, rgba(255, 179, 0, .10), transparent 60%),
        radial-gradient(900px 480px at 92% 8%, rgba(56, 96, 200, .22), transparent 62%),
        var(--navy-900);
    border-bottom: 1px solid var(--line);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
/* Izgara cocuklarinin varsayilan min-width:auto degeri min-content genisligini
   taban kabul ediyor; magaza rozetleri satiri 364px oldugu icin 390px'lik
   ekranda tasma yapiyordu. */
.hero-grid > *, .showcase > *, .card, .plan, .num { min-width: 0; }
@media (max-width: 880px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-shot { margin-inline: auto; }
    .badges { justify-content: center; }
}
.hero h1 { margin-bottom: .25em; }
.hero-sub {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 .8rem;
}
.hero-shot {
    width: min(360px, 100%);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.badges img {
    /* Eskiden rozetler farkli olculerde ve hizasizdi; yukseklik sabitlendi. */
    height: 52px;
    width: auto;
    border-radius: 9px;
}
@media (max-width: 420px) {
    /* 52px'te iki rozet 364px yapiyor ve kucuk ekranda tasiyordu */
    .badges { gap: 10px; }
    .badges img { height: 42px; }
}

/* --- Bolum ---------------------------------------------------------------- */
.section { padding: clamp(48px, 6vw, 92px) 0; }
.section--alt { background: var(--navy-850); border-block: 1px solid var(--line); }
.section-head { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 52px); text-align: center; }

/* --- Ozellik kartlari ---------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}
.card {
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px;
    transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: rgba(255, 179, 0, .42); transform: translateY(-2px); }
.card h3 { color: var(--orange); margin-bottom: .35em; }
.card p { color: var(--muted); margin: 0; font-size: .96rem; }

/* --- Galeri: metin + donen ekranlar ------------------------------------- */
.showcase {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}
@media (max-width: 880px) {
    .showcase { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.showcase-shot {
    width: min(300px, 100%);
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}

/* --- Fiyat kartlari ------------------------------------------------------ */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    max-width: 880px;
    margin-inline: auto;
}
.plan {
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.plan--pro { border-color: var(--orange); background: var(--navy-700); }
.plan h3 { margin-bottom: .6em; }
.plan--pro h3 { color: var(--orange); }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li {
    position: relative;
    padding-left: 26px;
    margin-bottom: .55rem;
    color: var(--muted);
    font-size: .97rem;
}
.plan li::before {
    content: "";
    position: absolute;
    left: 6px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--orange);
}
.plan .note { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }

/* --- Makale (SEO acilis sayfalari) -------------------------------------- */
.article { max-width: 780px; margin-inline: auto; }
.article h2 { margin-top: 2em; }
.article p, .article li { color: #c9d3e6; }
.article ol, .article ul { padding-left: 1.3em; margin: 0 0 1.2rem; }
.article li { margin-bottom: .4rem; }
.article-figure { margin: clamp(28px, 4vw, 48px) 0 0; }
.article-figure img { border-radius: var(--radius); border: 1px solid var(--line); }

/* --- Alt bilgi ---------------------------------------------------------- */
.foot {
    padding: clamp(40px, 5vw, 64px) 0 40px;
    background: var(--navy-850);
    border-top: 1px solid var(--line);
    text-align: center;
}
.foot-brand { font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 18px; }
.socials { display: flex; justify-content: center; gap: 18px; margin-bottom: 18px; }
.socials a { color: var(--muted); display: inline-flex; }
.socials a:hover { color: var(--orange); }
.socials svg { width: 21px; height: 21px; fill: currentColor; }
.foot-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: .93rem; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--orange); }
.foot-links span { color: rgba(255, 255, 255, .28); }
.langs { display: flex; justify-content: center; gap: 12px; margin: 16px 0; }
.langs img { width: 26px; height: 26px; border-radius: 50%; }
.copy { color: rgba(255, 255, 255, .42); font-size: .86rem; margin: 18px 0 0; }

/* --- Yardimcilar -------------------------------------------------------- */
.center { text-align: center; }
.mt-lg { margin-top: clamp(26px, 3vw, 44px); }
.skip {
    position: absolute; left: -9999px;
    background: var(--orange); color: #111; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 12px; top: 12px; z-index: 100; }

/* Hero'da sol kolon sagdaki telefona gore zayif kaliyordu; kisa bir olcut
   seridi dengeyi kuruyor. Degerler koddan: projectDefaults limitleri ve
   rakim duzeltmesinin gercek rotalarda olculen etkisi. */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 40px);
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.stat-n {
    display: block;
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    font-weight: 800;
    color: var(--orange);
    line-height: 1.15;
}
.stat-l { font-size: .84rem; color: var(--muted); }
.stats--center { justify-content: center; text-align: center; }
/* Dar ekranda esnek satir 3+1 diye kiriliyor ve son deger tek basina kaliyordu;
   dort deger icin 2x2 tek duzgun bolunme. */
@media (max-width: 560px) {
    .stats--center { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}
@media (max-width: 880px) { .stats { justify-content: center; } }

/* Makale sayfalarinda ust baslik bandi */
.page-head {
    padding: clamp(36px, 5vw, 70px) 0 clamp(20px, 3vw, 34px);
    background:
        radial-gradient(800px 380px at 20% -20%, rgba(255, 179, 0, .08), transparent 60%),
        var(--navy-900);
    border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .3em; }
.page-head .lead { max-width: 70ch; }
.muted-sm { color: var(--muted); font-size: .85rem; }

/* --- Logo ---------------------------------------------------------------- */
/* Logo seffaf (RGBA) oldugu icin koyu zeminde kutu olusturmuyor. Tek varlik
   (160px) hem navbar hem alt bilgi icin yeterli; retina'da da net. */
.logo-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.hero-logo {
    width: clamp(88px, 8vw, 112px);
    height: auto;
    margin-bottom: 20px;
}
@media (max-width: 880px) { .hero-logo { margin-inline: auto; } }
.foot-logo { width: 64px; height: 64px; margin: 0 auto 14px; }

/* --- Rakamlarla bandi ---------------------------------------------------- */
/* Degerler canli veritabanindan sayildi (2026-09-22) ve asagi yuvarlandi;
   sayfa statik oldugu icin ancak yeniden uretilince tazelenir, bu yuzden
   "34.000+" gibi tavansiz bicim kullaniliyor — eskise de dogru kalir. */
.nums {
    display: grid;
    /* 132px: 360px'lik telefonda bile iki kolon kaliyor (2*132+14 = 278 <= 305).
       150px'te tek kolona dusuyordu ve 8 kutu ekrani gereksiz uzatiyordu. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 14px;
}
/* auto-fit genis ekranda 7 kutuyu bir siraya dizip 8.'yi tek basina birakiyordu;
   8 kutu icin 4x2 tek duzgun bolunme. */
@media (min-width: 680px) { .nums { grid-template-columns: repeat(4, 1fr); } }
.num {
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
}
.num-n {
    display: block;
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem);
    font-weight: 800;
    color: var(--orange);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.num-l { font-size: .86rem; color: var(--muted); }

/* --- Kart ikonlari ------------------------------------------------------- */
.card-ico {
    width: 34px;
    height: 34px;
    display: block;
    margin-bottom: 12px;
    color: var(--orange);
}
.card-ico .dr {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Kaydirmaya bagli giris animasyonu ---------------------------------- */
/* Kart ekrana girerken hafifce yukselir ve ikonu cizilir. Tamamen CSS:
   animation-timeline: view() kaydirma konumunu okur, JavaScript gerekmez.
   Destegi olmayan tarayicida @supports blogu hic uygulanmaz ve kartlar
   dogrudan son haliyle (ikon cizili, opaklik 1) gorunur — icerik kaybolmaz.
   Azaltilmis hareket tercihi zaten yukaridaki * { animation: none } ile
   devre disi kaliyor, burada ayrica sarta baglandi. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .card {
            animation: card-in linear both;
            animation-timeline: view();
            animation-range: entry 6% entry 58%;
        }
        .card-ico .dr {
            stroke-dasharray: 100;
            animation: ico-draw linear both;
            animation-timeline: view();
            animation-range: entry 12% entry 76%;
        }
        .num {
            animation: card-in linear both;
            animation-timeline: view();
            animation-range: entry 6% entry 58%;
        }
    }
}
/* transform DEGIL translate: .card:hover kendi transform'uyla kartI kaldiriyor,
   animasyon transform'u kullansaydI hover efektini ezerdi. Iki ayri ozellik
   birlikte calisiyor. */
@keyframes card-in {
    from { opacity: .18; translate: 0 16px; }
    to   { opacity: 1;   translate: none; }
}
@keyframes ico-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}