/* ============================================================
   Webfinity: site geneli stil
   Tema: sıcak kağıt zemin + derin menekşe vurgu
   Tipografi: Bricolage Grotesque (başlık) / Figtree (metin)
   ============================================================ */

:root {
    --zemin:        #FAF9F6;
    --zemin-koyu:   #F3F1EC;
    --yuzey:        #FFFFFF;
    --murekkep:     #201A3D;
    --soluk:        #625C7E;
    --mor:          #5B21B6;
    --mor-canli:    #7C3AED;
    --mor-acik:     #EDE7FB;
    --mor-cizgi:    #DCD2F2;
    --amber:        #F59E0B;
    --cizgi:        #E8E5DE;
    --golge:        0 1px 2px rgba(32,26,61,.05), 0 12px 32px -12px rgba(32,26,61,.12);
    --golge-buyuk:  0 2px 4px rgba(32,26,61,.06), 0 24px 56px -16px rgba(91,33,182,.22);
    --yumusak:      cubic-bezier(.22,.61,.36,1);
    --baslik-font:  'Bricolage Grotesque', sans-serif;
    --metin-font:   'Figtree', sans-serif;
}

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

/* [hidden] her zaman gizlesin; display tanımlı öğelerde tarayıcı varsayılanı yetersiz kalır */
[hidden] { display: none !important; }

/* overflow-x: yatay kaymaya karşı güvence. Tek bir taşan öğe tüm sayfayı
   yana kaydırıp içeriğin kenardan kesilmesine yol açabiliyor. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: var(--metin-font);
    background: var(--zemin);
    color: var(--murekkep);
    line-height: 1.65;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--baslik-font);
    line-height: 1.12;
    letter-spacing: -.015em;
    font-weight: 700;
    text-wrap: balance;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

.kap { width: min(1180px, 100% - 48px); margin-inline: auto; }

.atla {
    position: absolute; left: -999px; top: 8px; z-index: 200;
    background: var(--mor); color: #fff; padding: 10px 18px; border-radius: 8px;
}
.atla:focus { left: 8px; }

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

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 15.5px;
    padding: 14px 26px; border-radius: 999px;
    transition: transform .25s var(--yumusak), box-shadow .25s var(--yumusak), background .25s;
    will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-dolu {
    background: var(--mor); color: #fff;
    box-shadow: 0 8px 20px -8px rgba(91,33,182,.55);
}
.btn-dolu:hover { background: var(--mor-canli); box-shadow: 0 14px 28px -10px rgba(124,58,237,.6); }

.btn-cerceve {
    border: 1.5px solid var(--cizgi); color: var(--murekkep); background: var(--yuzey);
}
.btn-cerceve:hover { border-color: var(--mor-cizgi); background: var(--mor-acik); }

.btn-beyaz { background: #fff; color: var(--mor); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.btn-beyaz:hover { background: var(--zemin); }

.btn-cerceve-acik { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.btn-cerceve-acik:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

.btn-kucuk { padding: 10px 20px; font-size: 14.5px; }

/* ---------- Etiketler ---------- */
.etiket {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--mor); background: var(--mor-acik);
    border: 1px solid var(--mor-cizgi);
    padding: 7px 15px; border-radius: 999px;
    margin-bottom: 20px;
}
.etiket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mor-canli); }
.etiket-acik { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.etiket-acik::before { background: var(--amber); }

/* ---------- Üst bar ---------- */
.ust-bar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250,249,246,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cizgi);
    transition: box-shadow .3s var(--yumusak), background .3s;
}
.ust-bar.kaydi { background: rgba(250,249,246,.94); box-shadow: 0 6px 24px -14px rgba(32,26,61,.4); }

/* Okuma ilerleme çubuğu */
.ilerleme-kanal { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; }
.ilerleme-cubugu {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--mor), var(--mor-canli), var(--amber));
    transition: width .12s linear;
}
.ust-bar-ic { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; width: auto; height: 42px; }
.logo-acik img { height: 40px; }

.ana-menu { display: flex; align-items: center; gap: 4px; }
.ana-menu > a, .menu-grup > a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; border-radius: 999px;
    font-size: 15px; font-weight: 500; color: var(--soluk);
    transition: color .2s, background .2s;
}
.ana-menu > a:hover, .menu-grup > a:hover { color: var(--murekkep); background: var(--zemin-koyu); }
.ana-menu a.aktif { color: var(--mor); background: var(--mor-acik); font-weight: 600; }

.menu-grup { position: relative; }
.alt-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2px;
    width: 520px; padding: 10px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
    box-shadow: var(--golge-buyuk);
    opacity: 0; visibility: hidden; transition: all .28s var(--yumusak);
}
.menu-grup:hover .alt-menu, .menu-grup:focus-within .alt-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.alt-menu a {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px; border-radius: 12px; transition: background .2s;
}
.alt-menu a:hover { background: var(--mor-acik); }
.alt-menu-ikon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
}
.alt-menu a:hover .alt-menu-ikon { background: var(--mor); color: #fff; }
.alt-menu b { display: block; font-size: 14.5px; font-weight: 600; }
.alt-menu small { color: var(--soluk); font-size: 12.5px; }

.ust-bar-sag { display: flex; align-items: center; gap: 18px; }
.tel-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--murekkep); transition: color .2s; }
.tel-link:hover { color: var(--mor); }
.tel-link svg { color: var(--mor-canli); }

.menu-dugme { display: none; flex-direction: column; gap: 5px; padding: 8px; }
/* Kapatma butonu ve menü içi iletişim bölümü yalnızca mobilde gösterilir */
.menu-kapat, .menu-iletisim { display: none; }
.menu-dugme span { width: 24px; height: 2.2px; border-radius: 2px; background: var(--murekkep); transition: all .3s var(--yumusak); }
.menu-dugme.acik span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.menu-dugme.acik span:nth-child(2) { opacity: 0; }
.menu-dugme.acik span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    padding: 90px 0 70px;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(560px 420px at 82% 8%, rgba(124,58,237,.14), transparent 65%),
        radial-gradient(480px 380px at 8% 90%, rgba(245,158,11,.09), transparent 60%);
    pointer-events: none;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(32,26,61,.11) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(640px 480px at 75% 20%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(640px 480px at 75% 20%, #000 20%, transparent 70%);
    pointer-events: none;
}
.hero-ic { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }

.hero h1 {
    font-size: clamp(38px, 5.2vw, 62px);
    font-weight: 800;
    margin-bottom: 22px;
}
.vurgu { position: relative; color: var(--mor); white-space: nowrap; }
.vurgu svg {
    position: absolute; left: 0; bottom: -.14em; width: 100%; height: .3em;
    color: var(--amber); overflow: visible;
}
.vurgu svg path {
    stroke-dasharray: 320; stroke-dashoffset: 320;
    animation: cizgi-cek 1s .7s var(--yumusak) forwards;
}
@keyframes cizgi-cek { to { stroke-dashoffset: 0; } }

.hero-metin p { font-size: 18.5px; color: var(--soluk); max-width: 52ch; margin-bottom: 32px; }
.hero-btnler { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }

.hero-guven { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.hero-yildiz { display: flex; flex-direction: column; gap: 3px; }
.hero-yildiz .yildizlar { color: var(--amber); display: flex; gap: 2px; }
.hero-yildiz span { font-size: 13.5px; color: var(--soluk); }
.hero-yildiz b { color: var(--murekkep); font-weight: 700; }
.hero-ayirac { width: 1px; height: 42px; background: var(--cizgi); }
.hero-rozetler { display: flex; flex-wrap: wrap; gap: 26px; }
.hero-rozet { display: flex; flex-direction: column; }
.hero-rozet b { font-family: var(--baslik-font); font-size: 26px; font-weight: 800; color: var(--murekkep); }
.hero-rozet span { font-size: 13.5px; color: var(--soluk); }

/* Ana CTA'da yavaşça geçen parıltı */
.btn-parlak { position: relative; overflow: hidden; }
.btn-parlak::after {
    content: ""; position: absolute; top: -50%; left: -70%;
    width: 45%; height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-22deg);
    animation: parla 4.5s 1.6s var(--yumusak) infinite;
}
@keyframes parla {
    0%   { left: -70%; }
    26%  { left: 130%; }
    100% { left: 130%; }
}

/* Hero yükleme animasyonu */
.hero-metin > * { opacity: 0; transform: translateY(18px); animation: bel .7s var(--yumusak) forwards; }
.hero-metin > *:nth-child(1) { animation-delay: .05s; }
.hero-metin > *:nth-child(2) { animation-delay: .15s; }
.hero-metin > *:nth-child(3) { animation-delay: .25s; }
.hero-metin > *:nth-child(4) { animation-delay: .35s; }
.hero-metin > *:nth-child(5) { animation-delay: .45s; }
@keyframes bel { to { opacity: 1; transform: none; } }

/* Hero sağ görsel: yüzen panel kartları */
.hero-gorsel { position: relative; min-height: 430px; }
.panel-kart {
    position: absolute;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
    box-shadow: var(--golge-buyuk);
    padding: 20px 22px;
    opacity: 0; animation: kart-gel .8s var(--yumusak) forwards;
    transition: transform .35s var(--yumusak), box-shadow .35s var(--yumusak);
}
.hero-gorsel:hover .panel-kart-buyuk { transform: translateY(-6px); }
.hero-gorsel:hover .panel-kart-orta  { transform: translateY(-4px) translateX(4px); }
.hero-gorsel:hover .panel-kart-kucuk { transform: translateY(-4px) translateX(-4px); }
@keyframes kart-gel { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }

.panel-kart-buyuk { top: 8%; left: 4%; right: 14%; animation-delay: .35s; }
.panel-kart-buyuk .pk-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-kart-buyuk .pk-baslik span { font-size: 13px; font-weight: 600; color: var(--soluk); }
.pk-deger { font-family: var(--baslik-font); font-size: 30px; font-weight: 800; }
.pk-artis { font-size: 13px; font-weight: 700; color: #16A34A; background: #E8F7EE; padding: 4px 10px; border-radius: 999px; }
.panel-kart-buyuk .pk-deger small { font-size: 13px; font-weight: 600; color: var(--soluk); }
.pk-grafik { width: 100%; height: auto; overflow: visible; }
.pk-grafik .alan { fill: url(#grad-alan); }
.pk-grafik .cizgi-yol {
    fill: none; stroke: var(--mor-canli); stroke-width: 2.6; stroke-linecap: round;
    stroke-dasharray: 420; stroke-dashoffset: 420;
    animation: cizgi-cek 1.6s .9s var(--yumusak) forwards;
}
.pk-izgara line { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 5; }
.pk-nokta circle {
    fill: #fff; stroke: var(--mor-canli); stroke-width: 2.4;
    opacity: 0; animation: nokta-bel .4s var(--yumusak) forwards;
}
.pk-nokta .son-nokta { fill: var(--mor-canli); stroke: #fff; stroke-width: 3; }
@keyframes nokta-bel { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.pk-nokta circle { transform-box: fill-box; transform-origin: center; }
.pk-eksen text { font-family: var(--metin-font); font-size: 9.5px; font-weight: 600; fill: var(--soluk); }

.panel-kart-orta { bottom: 12%; right: 0; width: 235px; animation-delay: .55s; }
.panel-kart-orta .pk-satir { display: flex; align-items: center; gap: 12px; }
.pk-halka { position: relative; width: 58px; height: 58px; flex: 0 0 auto; }
.pk-halka svg { transform: rotate(-90deg); }
.pk-halka .halka-iz { fill: none; stroke: var(--mor-acik); stroke-width: 6; }
.pk-halka .halka-dolu {
    fill: none; stroke: var(--mor-canli); stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: halka-dol 1.4s 1s var(--yumusak) forwards;
}
@keyframes halka-dol { to { stroke-dashoffset: 24; } }
.pk-halka b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; font-family: var(--baslik-font); }
.panel-kart-orta b.pk-mini-baslik { display: block; font-size: 14.5px; }
.panel-kart-orta small { color: var(--soluk); font-size: 12.5px; }

.panel-kart-kucuk {
    bottom: 30%; left: 0; width: 205px; animation-delay: .75s;
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
}
.pk-ikon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; background: #FEF3C7; color: #B45309; }
.panel-kart-kucuk b { display: block; font-size: 14px; }
.panel-kart-kucuk small { color: var(--soluk); font-size: 12px; }

.hero-blob {
    position: absolute; z-index: -1; top: 50%; left: 50%;
    width: 400px; height: 400px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(124,58,237,.16), transparent);
    border-radius: 50%;
}

/* ---------- Kayan şerit ---------- */
.serit { background: var(--murekkep); color: #F4F1FB; overflow: hidden; padding: 15px 0; }
.serit-ic { display: flex; gap: 0; width: max-content; animation: kaydir 28s linear infinite; }
.serit span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-family: var(--baslik-font); font-weight: 600; font-size: 15.5px; letter-spacing: .04em; white-space: nowrap; }
.serit i { font-style: normal; color: var(--amber); }
@keyframes kaydir { to { transform: translateX(-50%); } }

/* ---------- Bölüm düzeni ---------- */
.bolum { padding: 96px 0; }
.bolum-koyu-zemin { background: var(--zemin-koyu); }
.bolum-baslik { max-width: 640px; margin-bottom: 56px; }
.bolum-baslik.ortala { max-width: 760px; margin-inline: auto; text-align: center; }
.bolum-baslik h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.bolum-baslik p { color: var(--soluk); font-size: 17.5px; }
/* Ortali basliklarda aciklama metni daha dar kalsin: satirlar dengeli bolunur */
.bolum-baslik.ortala p { max-width: 620px; margin-inline: auto; }
/* Baslik satirlarini dengeli bol (destekleyen tarayicilarda) */
.bolum-baslik h2 { text-wrap: balance; }

/* Scroll ile görünme */
.gorun { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--yumusak), transform .7s var(--yumusak); }
.gorun.geldi { opacity: 1; transform: none; }

/* Bölüm başlığı altındaki ince vurgu çizgisi */
.bolum-baslik h2 { position: relative; }
.bolum-baslik.ortala { position: relative; }

/* Metin bağlantılarında altı çizgi animasyonu */
.metin-link {
    position: relative; color: var(--mor); font-weight: 600;
    background-image: linear-gradient(var(--mor-canli), var(--mor-canli));
    background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size .35s var(--yumusak);
}
.metin-link:hover { background-size: 100% 2px; }

/* ---------- Hizmet kartları ---------- */
.hizmet-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.hizmet-kart {
    position: relative; display: block;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 30px 28px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s;
    overflow: hidden;
}
.hizmet-kart::after {
    content: ""; position: absolute; left: 28px; right: 28px; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--mor-canli), var(--amber));
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--yumusak);
}
.hizmet-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); border-color: var(--mor-cizgi); }
.hizmet-kart:hover::after { transform: scaleX(1); }
.hizmet-kart-ikon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
    margin-bottom: 20px;
    transition: background .3s, color .3s, transform .3s var(--yumusak);
}
.hizmet-kart:hover .hizmet-kart-ikon { background: var(--mor); color: #fff; transform: rotate(-6deg) scale(1.06); }
.hizmet-kart h3 { font-size: 20px; margin-bottom: 4px; }
.hizmet-kart .kisa { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mor-canli); }
.hizmet-kart p { color: var(--soluk); font-size: 15px; margin-top: 12px; }
/* Izgaranın sonundaki dönüşüm kartı */
.hizmet-kart-cta { background: var(--mor-acik); border-color: var(--mor-cizgi); border-style: dashed; }
.hizmet-kart-cta .hizmet-kart-ikon { background: var(--mor); color: #fff; }
.hizmet-kart-cta:hover .hizmet-kart-ikon { background: var(--mor-canli); }
.hizmet-kart-cta:hover { border-style: solid; background: var(--yuzey); }

.hizmet-kart .kart-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; font-size: 14.5px; color: var(--mor); }
.hizmet-kart .kart-ok svg { transition: transform .3s var(--yumusak); }
.hizmet-kart:hover .kart-ok svg { transform: translateX(5px); }

/* ---------- Süreç ---------- */
.surec-izgara { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; counter-reset: adim; }
.surec-adim {
    position: relative; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: 20px; padding: 30px 26px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s;
}
.surec-adim:hover { transform: translateY(-5px); box-shadow: var(--golge); border-color: var(--mor-cizgi); }
.surec-adim::before { transition: -webkit-text-stroke-color .3s, color .3s; }
.surec-adim::before {
    counter-increment: adim; content: "0" counter(adim);
    display: block;
    font-family: var(--baslik-font); font-size: 44px; font-weight: 800;
    color: transparent; -webkit-text-stroke: 1.4px var(--mor-cizgi);
    margin-bottom: 14px; line-height: 1;
}
.surec-adim:hover::before { -webkit-text-stroke-color: var(--mor-canli); }
.surec-adim h3 { font-size: 18.5px; margin-bottom: 8px; }
.surec-adim p { color: var(--soluk); font-size: 14.5px; }

/* ---------- İstatistik bandı ---------- */
.sayilar {
    background: linear-gradient(135deg, var(--mor) 0%, #3B1580 55%, #2A1160 100%);
    border-radius: 28px; padding: 64px 20px;
    position: relative; overflow: hidden;
}
.sayilar::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(70% 120% at 50% 0%, #000, transparent);
    -webkit-mask-image: radial-gradient(70% 120% at 50% 0%, #000, transparent);
}
.sayilar-izgara { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; text-align: center; }
.sayi-kutu { transition: transform .3s var(--yumusak); }
.sayi-kutu:hover { transform: translateY(-4px); }
.sayi-kutu b {
    display: block; font-family: var(--baslik-font);
    font-size: clamp(38px, 4.6vw, 56px); font-weight: 800; color: #fff; line-height: 1.05;
}
.sayi-kutu b em { font-style: normal; color: var(--amber); }
.sayi-kutu span { color: rgba(255,255,255,.75); font-size: 15px; }

/* ---------- Fiyat kartları ---------- */
.fiyat-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.fiyat-kart {
    position: relative; display: flex; flex-direction: column;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px;
    padding: 36px 32px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak);
}
.fiyat-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.fiyat-kart.populer {
    background: linear-gradient(165deg, #2A1160, var(--mor) 130%);
    color: #fff; border-color: transparent;
    box-shadow: var(--golge-buyuk);
}
.populer-rozet {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--amber); color: #451A03;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.fiyat-kart h3 { font-size: 21px; margin-bottom: 6px; }
.fiyat-kart .aciklama { font-size: 14.5px; color: var(--soluk); min-height: 44px; }
.fiyat-kart.populer .aciklama { color: rgba(255,255,255,.75); }
.fiyat { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 26px; }
.fiyat b { font-family: var(--baslik-font); font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
.fiyat span { color: var(--soluk); font-size: 15px; }
/* Rakam yerine "Teklife gore" yazildiginda daha kucuk ve mor gorunur */
.fiyat b.fiyat-teklif { font-size: 26px; color: var(--mor); }
.populer .fiyat b.fiyat-teklif { color: inherit; }
.fiyat-kart.populer .fiyat span { color: rgba(255,255,255,.7); }
.fiyat-liste { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.fiyat-liste li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.fiyat-liste svg { flex: 0 0 auto; margin-top: 3px; color: var(--mor-canli); }
.fiyat-kart.populer .fiyat-liste svg { color: var(--amber); }
.fiyat-kart .btn { justify-content: center; }
.fiyat-not { text-align: center; color: var(--soluk); font-size: 14.5px; margin-top: 28px; }

/* ---------- SSS ---------- */
.sss-liste { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.sss-madde { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.sss-madde.acik { border-color: var(--mor-cizgi); box-shadow: var(--golge); }
.sss-soru {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: left; padding: 20px 24px;
    font-weight: 600; font-size: 16.5px; font-family: var(--metin-font);
}
.sss-soru .arti {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
    transition: transform .35s var(--yumusak), background .25s, color .25s;
}
.sss-madde.acik .arti { transform: rotate(45deg); background: var(--mor); color: #fff; }
.sss-cevap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--yumusak); }
.sss-madde.acik .sss-cevap { grid-template-rows: 1fr; }
.sss-cevap-ic { overflow: hidden; }
.sss-cevap p { padding: 0 24px 22px; color: var(--soluk); font-size: 15.5px; }

/* ---------- Müşteri yorumları ---------- */
.yorum-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.yorum-kart {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 30px 28px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak);
}
.yorum-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-buyuk); }
.yildizlar { display: flex; gap: 3px; color: var(--amber); }
.yorum-kart blockquote { color: #453F63; font-size: 15.5px; flex: 1; }
.yorum-kart figcaption { display: flex; align-items: center; gap: 13px; }
.yorum-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
    font-family: var(--baslik-font); font-weight: 800; font-size: 19px;
}
.yorum-kart figcaption b { display: block; font-size: 15px; }
.yorum-kart figcaption small { color: var(--soluk); font-size: 13px; }

/* ---------- Güvence şeridi ---------- */
.guvence-serit {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
    margin-top: 40px; padding: 30px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px;
}
.guvence { display: flex; gap: 15px; align-items: flex-start; }
.guvence-ikon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
}
.guvence b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.guvence small { color: var(--soluk); font-size: 13.5px; line-height: 1.5; display: block; }

/* ---------- Başarı hikayeleri: liste satırı ---------- */
.vaka-satir {
    display: grid; grid-template-columns: 300px 1fr; gap: 0;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px;
    overflow: hidden; margin-bottom: 24px;
    transition: transform .35s var(--yumusak), box-shadow .35s var(--yumusak), border-color .3s;
}
.vaka-satir:hover { transform: translateY(-5px); box-shadow: var(--golge-buyuk); border-color: var(--mor-cizgi); }
.vaka-satir-kapak {
    position: relative; display: grid; place-items: center;
    color: rgba(255,255,255,.92); min-height: 220px; overflow: hidden;
}
.vaka-satir-kapak::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent);
    -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent);
}
.vaka-satir-kapak svg { position: relative; z-index: 1; transition: transform .4s var(--yumusak); }
.vaka-satir:hover .vaka-satir-kapak svg { transform: scale(1.12) rotate(-5deg); }
.vaka-sure {
    position: absolute; z-index: 1; bottom: 16px; left: 50%; transform: translateX(-50%);
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vaka-satir-ic { padding: 32px 34px; display: flex; flex-direction: column; }
.vaka-satir-ic h2 { font-size: 24px; margin-bottom: 10px; }
.vaka-satir-ic > p { color: var(--soluk); font-size: 15.5px; }

.vaka-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vaka-sektor, .vaka-hizmet {
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.vaka-sektor { background: var(--mor); color: #fff; }
.vaka-hizmet { background: var(--mor-acik); color: var(--mor); border: 1px solid var(--mor-cizgi); }

.vaka-mini-metrik {
    display: flex; flex-wrap: wrap; gap: 28px;
    margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--cizgi);
}
.vaka-mini-metrik b {
    display: block; font-family: var(--baslik-font); font-size: 26px; font-weight: 800;
    background: linear-gradient(120deg, var(--mor-canli), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1.1;
}
.vaka-mini-metrik span { font-size: 13px; color: var(--soluk); }
.vaka-satir .kart-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-weight: 600; font-size: 14.5px; color: var(--mor); }
.vaka-satir:hover .kart-ok svg { transform: translateX(5px); }
.vaka-satir .kart-ok svg { transition: transform .3s var(--yumusak); }

.vaka-not { color: var(--soluk); font-size: 13.5px; text-align: center; max-width: 62ch; margin: 34px auto 0; }

/* ---------- Vaka vitrin kartı (anasayfa) ---------- */
.vaka-vitrin {
    display: flex; flex-direction: column;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    overflow: hidden;
    transition: transform .32s var(--yumusak), box-shadow .32s var(--yumusak);
}
.vaka-vitrin:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.vaka-vitrin-ust {
    position: relative; padding: 30px 28px 26px; color: #fff; overflow: hidden;
}
.vaka-vitrin-ust::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(90% 90% at 80% 0%, #000, transparent);
    -webkit-mask-image: radial-gradient(90% 90% at 80% 0%, #000, transparent);
}
.vaka-vitrin-sektor {
    position: relative; display: inline-block;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.26);
    padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
}
.vaka-vitrin-ust b {
    position: relative; display: block;
    font-family: var(--baslik-font); font-size: 46px; font-weight: 800; line-height: 1;
    transition: transform .32s var(--yumusak);
}
.vaka-vitrin:hover .vaka-vitrin-ust b { transform: scale(1.06); transform-origin: left; }
.vaka-vitrin-ust > span:last-child { position: relative; display: block; font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 5px; }
.vaka-vitrin-alt { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.vaka-vitrin-alt h3 { font-size: 19px; margin-bottom: 9px; }
.vaka-vitrin-alt p { color: var(--soluk); font-size: 14.5px; flex: 1; }
.vaka-vitrin .kart-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; font-size: 14.5px; color: var(--mor); }
.vaka-vitrin .kart-ok svg { transition: transform .3s var(--yumusak); }
.vaka-vitrin:hover .kart-ok svg { transform: translateX(5px); }

/* ---------- Önce / Sonra tablosu ---------- */
.oncesonra {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px;
    overflow: hidden; box-shadow: var(--golge);
}
.oncesonra-baslik, .oncesonra-satir {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px;
    padding: 18px 28px; align-items: center;
}
.oncesonra-baslik {
    background: var(--zemin-koyu); border-bottom: 1px solid var(--cizgi);
    font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
}
.oncesonra-satir { border-bottom: 1px solid var(--cizgi); transition: background .25s; }
.oncesonra-satir:last-child { border-bottom: 0; }
.oncesonra-satir:hover { background: var(--zemin); }
.os-etiket { font-weight: 600; font-size: 15.5px; }
.os-once { color: var(--soluk); font-size: 16px; text-decoration: line-through; text-decoration-color: var(--mor-cizgi); }
.os-sonra { font-family: var(--baslik-font); font-weight: 800; font-size: 21px; color: var(--murekkep); }
.os-artis {
    justify-self: start;
    font-size: 13.5px; font-weight: 700;
    color: #14532D; background: #E8F7EE; border: 1px solid #BBE7CC;
    padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.os-mobil-baslik { display: none; }

/* ---------- Vaka hikaye blokları ---------- */
.vaka-hikaye { display: grid; gap: 20px; max-width: 860px; }
.vaka-blok {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 30px 32px;
    border-left: 4px solid var(--mor-canli);
}
.vaka-blok-etiket {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--baslik-font); font-weight: 700; font-size: 18px;
    margin-bottom: 12px;
}
.vaka-blok-etiket span {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--mor-acik); color: var(--mor);
    font-size: 13.5px; font-weight: 800;
}
.vaka-blok p { color: #453F63; font-size: 16.5px; }

.vaka-alinti {
    max-width: 860px; margin-top: 32px;
    background: linear-gradient(135deg, #2A1160, var(--mor) 110%);
    border-radius: 22px; padding: 40px 42px; color: #fff;
    position: relative; overflow: hidden;
}
.vaka-alinti::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,158,11,.28), transparent);
}
.vaka-alinti .yildizlar { color: var(--amber); margin-bottom: 14px; }
.vaka-alinti blockquote {
    position: relative; font-family: var(--baslik-font); font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 600; line-height: 1.45; margin-bottom: 16px;
}
.vaka-alinti figcaption { position: relative; color: rgba(255,255,255,.72); font-size: 14.5px; }

/* ============================================================
   ÜCRETSİZ ARAÇLAR
   ============================================================ */
/* Ikon ve baslik dikey istiflenir; sayfa girisi ortali oldugu icin
   yan yana dizilis basligi eksenden kaydiriyordu. */
.arac-hero .arac-baslik {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.arac-baslik-ikon {
    flex: 0 0 auto; width: 62px; height: 62px; border-radius: 17px;
    display: grid; place-items: center;
    background: var(--mor); color: #fff;
    box-shadow: 0 10px 24px -10px rgba(91,33,182,.6);
}
.arac-hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 0; max-width: none; }
.arac-hero .etiket { margin-bottom: 10px; }
.arac-hero .ozet { margin-top: 20px; }
.arac-ucretsiz-not {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    font-size: 14px; font-weight: 600; color: #15803D;
    background: #E8F7EE; border: 1px solid #BBE7CC;
    padding: 7px 15px; border-radius: 999px;
}

.arac-bolum { padding-top: 28px; }
.arac-kap { width: min(880px, 100% - 48px); margin-inline: auto; }

/* Form */
.arac-form {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px;
    padding: 30px 32px; box-shadow: var(--golge);
}
.arac-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.arac-form-satir { display: flex; gap: 12px; }
.arac-form input[type="text"], .arac-form input[type="url"], .arac-form select, .arac-form textarea {
    flex: 1; font: inherit; font-size: 16px; color: var(--murekkep);
    background: var(--zemin); border: 1.5px solid var(--cizgi); border-radius: 12px;
    padding: 14px 16px; width: 100%;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.arac-form input:focus, .arac-form select:focus, .arac-form textarea:focus {
    outline: none; border-color: var(--mor-canli); background: #fff;
    box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.arac-form .btn { flex: 0 0 auto; white-space: nowrap; }
.arac-form small { display: block; margin-top: 10px; color: var(--soluk); font-size: 13.5px; }
.arac-form-izgara { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.arac-form-izgara .genis { grid-column: 1 / -1; }
.arac-form-alan { display: flex; flex-direction: column; }

.arac-uyari {
    margin-top: 20px; padding: 16px 20px; border-radius: 13px;
    background: #FDEDED; color: #7F1D1D; border: 1px solid #F5C6C6;
    font-size: 15px;
}
.arac-bilgi {
    margin-top: 20px; padding: 16px 20px; border-radius: 13px;
    background: #FFFBEB; color: #713F12; border: 1px solid #FDE68A;
    font-size: 14.5px; line-height: 1.6;
}
.arac-bilgi a { color: var(--mor); font-weight: 600; text-decoration: underline; }

/* Sonuç bloğu */
.arac-sonuc { margin-top: 30px; }
.arac-sonuc-baslik {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.arac-sonuc-baslik h2 { font-size: 24px; word-break: break-all; }
.arac-ozet-rozet {
    font-size: 13px; font-weight: 700;
    background: var(--mor-acik); color: var(--mor); border: 1px solid var(--mor-cizgi);
    padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}

/* Veri tablosu */
.veri-tablo-sar { overflow-x: auto; border-radius: 14px; border: 1px solid var(--cizgi); }
.veri-tablo { width: 100%; border-collapse: collapse; background: var(--yuzey); font-size: 14.5px; }
.veri-tablo th {
    text-align: left; padding: 12px 16px;
    background: var(--zemin-koyu); border-bottom: 1px solid var(--cizgi);
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soluk);
    white-space: nowrap;
}
.veri-tablo td { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.veri-tablo tr:last-child td { border-bottom: 0; }
.veri-tablo tbody tr { transition: background .2s; }
.veri-tablo tbody tr:hover { background: var(--zemin); }
.veri-tablo .dar { width: 1%; white-space: nowrap; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13.5px; word-break: break-all; }

/* DNS grupları */
.dns-grup { margin-bottom: 22px; }
.dns-grup-baslik { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dns-grup-baslik b {
    font-family: var(--baslik-font); font-size: 17px;
    background: var(--mor); color: #fff; padding: 3px 11px; border-radius: 8px;
}
.dns-grup-baslik small { color: var(--soluk); font-size: 13.5px; }

/* Durum rozetleri */
.durum { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.durum-iyi   { background: #E8F7EE; color: #15803D; border: 1px solid #BBE7CC; }
.durum-orta  { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.durum-kotu  { background: #FDEDED; color: #B91C1C; border: 1px solid #F5C6C6; }
.durum-notr  { background: var(--zemin-koyu); color: var(--soluk); border: 1px solid var(--cizgi); }

/* Özet kutucukları */
.ozet-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ozet-kutu {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px;
    padding: 20px; text-align: center;
}
.ozet-kutu b { display: block; font-family: var(--baslik-font); font-size: 30px; font-weight: 800; line-height: 1.1; }
.ozet-kutu span { font-size: 13px; color: var(--soluk); }
.ozet-kutu.iyi b { color: #15803D; }
.ozet-kutu.kotu b { color: #B91C1C; }
.ozet-kutu.orta b { color: #B45309; }

/* Denetim listesi (site sağlık) */
.denetim-liste { display: flex; flex-direction: column; gap: 12px; }
.denetim-satir {
    display: flex; gap: 15px; align-items: flex-start;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px;
    padding: 18px 22px;
    border-left: 4px solid var(--cizgi);
}
.denetim-satir.iyi   { border-left-color: #16A34A; }
.denetim-satir.orta  { border-left-color: var(--amber); }
.denetim-satir.kotu  { border-left-color: #DC2626; }
.denetim-ikon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.denetim-satir.iyi .denetim-ikon  { background: #E8F7EE; color: #15803D; }
.denetim-satir.orta .denetim-ikon { background: #FEF3C7; color: #B45309; }
.denetim-satir.kotu .denetim-ikon { background: #FDEDED; color: #B91C1C; }
.denetim-icerik b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.denetim-icerik p { color: var(--soluk); font-size: 14px; line-height: 1.55; }
.denetim-icerik .bulgu { display: block; margin-top: 6px; font-size: 13.5px; color: var(--murekkep); background: var(--zemin-koyu); padding: 8px 12px; border-radius: 8px; word-break: break-word; }

/* Yönlendirme zinciri */
.zincir-liste { display: flex; flex-direction: column; gap: 0; }
.zincir-adim { display: flex; gap: 16px; }
.zincir-cizgi { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.zincir-nokta {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800; font-family: var(--baslik-font);
    background: var(--mor-acik); color: var(--mor); border: 2px solid var(--mor-cizgi);
}
.zincir-adim.son .zincir-nokta { background: var(--mor); color: #fff; border-color: var(--mor); }
.zincir-bag { width: 2px; flex: 1; background: var(--mor-cizgi); min-height: 22px; }
.zincir-govde { flex: 1; padding-bottom: 20px; }
.zincir-govde .url { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; word-break: break-all; margin-bottom: 5px; display: block; }
.zincir-govde .meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Snippet önizleme */
.snippet-onizleme {
    background: #fff; border: 1px solid var(--cizgi); border-radius: 14px;
    padding: 22px 24px; margin-top: 22px;
}
.snippet-onizleme .sn-url { color: #202124; font-size: 13px; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; }
.snippet-onizleme .sn-favicon { width: 22px; height: 22px; border-radius: 50%; background: var(--mor); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.snippet-onizleme .sn-baslik { color: #1a0dab; font-size: 20px; line-height: 1.3; margin-bottom: 4px; font-family: arial, sans-serif; }
.snippet-onizleme .sn-aciklama { color: #4d5156; font-size: 14px; line-height: 1.58; font-family: arial, sans-serif; }
.snippet-onizleme.mobil { max-width: 380px; }
.sn-sekmeler { display: flex; gap: 8px; margin-top: 22px; }
.sn-sekme {
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    background: var(--yuzey); border: 1.5px solid var(--cizgi); color: var(--soluk);
    transition: all .2s;
}
.sn-sekme.aktif { background: var(--mor); border-color: var(--mor); color: #fff; }
.sayac-satir { display: flex; justify-content: space-between; font-size: 13px; margin-top: 7px; }
.sayac-satir .iyi { color: #15803D; font-weight: 600; }
.sayac-satir .kotu { color: #B91C1C; font-weight: 600; }

/* Slug üretici sonuçları */
.slug-satir {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
    padding: 16px 18px; margin-bottom: 12px;
}
.slug-kaynak { font-size: 13.5px; color: var(--soluk); margin-bottom: 8px; }
.slug-sonuc { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.slug-sonuc code {
    font-family: ui-monospace, Consolas, monospace; font-size: 14.5px; font-weight: 600;
    color: var(--mor); background: var(--mor-acik); padding: 7px 12px; border-radius: 8px;
    word-break: break-all;
}
.slug-sag { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.slug-kopya {
    font-size: 13px; font-weight: 600; color: var(--soluk);
    border: 1.5px solid var(--cizgi); background: var(--zemin);
    padding: 6px 13px; border-radius: 8px; transition: all .2s; white-space: nowrap;
}
.slug-kopya:hover { border-color: var(--mor-cizgi); color: var(--mor); }

/* Tekrarlı form satırları (schema oluşturucu) */
.sc-satir {
    display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px;
    margin-bottom: 10px; align-items: start;
}
.sc-satir input, .sc-satir textarea {
    font: inherit; font-size: 14.5px; color: var(--murekkep);
    background: var(--zemin); border: 1.5px solid var(--cizgi); border-radius: 10px;
    padding: 11px 13px; width: 100%; resize: vertical;
}
.sc-satir input:focus, .sc-satir textarea:focus {
    outline: none; border-color: var(--mor-canli); background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.sc-sil {
    width: 40px; height: 42px; border-radius: 10px; flex: 0 0 auto;
    background: #FDEDED; color: #B91C1C; border: 1.5px solid #F5C6C6;
    font-size: 20px; line-height: 1; transition: background .2s;
}
.sc-sil:hover { background: #FBD5D5; }

/* Open Graph önizleme kartı */
.og-onizleme {
    max-width: 500px; border: 1px solid var(--cizgi); border-radius: 14px;
    overflow: hidden; background: var(--yuzey);
}
.og-gorsel { aspect-ratio: 1.91/1; background: var(--zemin-koyu); overflow: hidden; }
.og-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-gorsel-yok {
    width: 100%; height: 100%; display: grid; place-items: center; gap: 8px;
    color: var(--soluk); align-content: center;
}
.og-gorsel-yok span { font-size: 13.5px; }
.og-metin { padding: 14px 16px; background: #F5F6F7; }
.og-host { font-size: 11.5px; color: #65676B; letter-spacing: .02em; }
.og-metin b { display: block; font-size: 15.5px; margin: 3px 0 4px; line-height: 1.35; color: #050505; }
.og-metin p { font-size: 13.5px; color: #65676B; line-height: 1.4; }

/* Kod çıktısı */
.kod-kutu {
    position: relative; background: #1E1B33; border-radius: 14px; padding: 22px 24px;
    overflow-x: auto; margin-top: 18px;
}
.kod-kutu pre { color: #E8E4F5; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.65; white-space: pre; }
.kopyala-btn {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2);
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    transition: background .2s;
}
.kopyala-btn:hover { background: rgba(255,255,255,.22); }
.kopyala-btn.tamam { background: #16A34A; border-color: #16A34A; }

/* Araç CTA */
.arac-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, #2A1160, var(--mor) 110%);
    border-radius: 20px; padding: 28px 32px; margin-top: 30px; color: #fff;
}
.arac-cta b { display: block; font-family: var(--baslik-font); font-size: 19px; margin-bottom: 5px; }
.arac-cta span { color: rgba(255,255,255,.78); font-size: 14.5px; max-width: 52ch; display: block; }
.arac-cta .btn { flex: 0 0 auto; }

.arac-rozet {
    position: absolute; top: 18px; right: 18px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    background: #E8F7EE; color: #15803D; border: 1px solid #BBE7CC;
    padding: 4px 10px; border-radius: 999px;
}
/* Araçlar açılır menüsü: gruplu sütunlar */
.alt-menu-araclar { width: 760px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px 14px; padding: 20px 18px 10px; }
.alt-menu-sutun { display: flex; flex-direction: column; gap: 1px; }
.alt-menu-grup {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mor); padding: 4px 8px 6px; white-space: nowrap;
    transition: color .2s;
}
.alt-menu-grup:hover { color: var(--mor-canli); text-decoration: underline; }
.alt-menu-sutun a {
    display: block; padding: 6px 8px; border-radius: 8px;
    font-size: 13.5px; color: var(--soluk); transition: background .2s, color .2s;
}
.alt-menu-sutun a:hover { background: var(--mor-acik); color: var(--mor); }
.alt-menu-tumu {
    grid-column: 1 / -1; text-align: center; font-size: 14px; font-weight: 600;
    color: var(--mor) !important; padding: 12px !important; margin-top: 8px;
    border-top: 1px solid var(--cizgi); border-radius: 0 0 12px 12px;
}

/* ---------- WhatsApp sabit butonu ---------- */
.wa-sabit {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366; color: #fff;
    box-shadow: 0 10px 26px -8px rgba(37,211,102,.65);
    transition: transform .25s var(--yumusak), box-shadow .25s;
}
.wa-sabit:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 32px -8px rgba(37,211,102,.7); }
.wa-sabit svg { width: 28px; height: 28px; }

/* ---------- Erişilebilirlik: klavye odağı ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--mor-canli); outline-offset: 2px; border-radius: 6px;
}

/* ---------- Onay kutusu ---------- */
.onay-alan { grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start; }
.onay-alan input[type="checkbox"] {
    width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto;
    accent-color: var(--mor); cursor: pointer;
}
.onay-alan label { font-size: 13.5px; color: var(--soluk); font-weight: 400; cursor: pointer; }
.onay-alan label a { color: var(--mor); font-weight: 600; text-decoration: underline; }

/* Honeypot: botların doldurması için gizli tuzak alan */
.hp-alan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA bandı ---------- */
.cta-band { padding: 0 0 96px; }
.cta-band-ic {
    background: linear-gradient(135deg, #2A1160, var(--mor) 80%);
    border-radius: 28px; padding: 64px;
    display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: center;
    color: #fff; position: relative; overflow: hidden;
}
.cta-band-ic::after {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,158,11,.25), transparent);
}
.cta-band-ic h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 14px; }
.cta-band-ic p { color: rgba(255,255,255,.78); max-width: 48ch; }
.cta-band-btnler { display: flex; flex-direction: column; gap: 14px; align-items: stretch; position: relative; }
.cta-band-btnler .btn { justify-content: center; }

/* ---------- Footer ---------- */
.alt-bilgi { background: var(--murekkep); color: #B9B3D1; padding: 72px 0 0; }
.alt-bilgi-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 34px; padding-bottom: 56px; }
.alt-bilgi-yasal { display: flex; flex-wrap: wrap; gap: 18px; }
.alt-bilgi-yasal a { transition: color .2s; }
.alt-bilgi-yasal a:hover { color: #fff; }
.alt-bilgi-marka p { font-size: 15px; margin: 18px 0 22px; max-width: 34ch; }
.alt-bilgi h3 { color: #fff; font-size: 15.5px; margin-bottom: 18px; letter-spacing: .02em; }
.alt-bilgi ul { display: flex; flex-direction: column; gap: 10px; }
.alt-bilgi ul a { font-size: 15px; transition: color .2s; }
.alt-bilgi ul a:hover { color: #fff; }
.iletisim-liste li { font-size: 15px; }
.sosyal { display: flex; gap: 10px; }
.sosyal a {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    transition: background .25s, color .25s, transform .25s var(--yumusak);
}
.sosyal a:hover { background: var(--mor-canli); color: #fff; transform: translateY(-3px); }
.alt-bilgi-cizgi {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 22px 0; border-top: 1px solid rgba(255,255,255,.09);
    font-size: 14px;
}

/* ---------- İç sayfa hero ---------- */
.sayfa-hero { position: relative; padding: 76px 0 60px; overflow: hidden; }
.sayfa-hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 340px at 85% 0%, rgba(124,58,237,.13), transparent 65%);
    pointer-events: none;
}
.sayfa-hero h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin-bottom: 16px; max-width: 20ch; }

/* Sayfa girisleri varsayilan olarak ortali.
   Istisna: makale akisi olan sayfalar (.yazi-govde iceren blog yazisi gibi);
   orada baslik, altindaki metinle ayni hizada kalmali. */
.sayfa-hero > .kap:not(.yazi-govde) { text-align: center; }
.sayfa-hero > .kap:not(.yazi-govde) .kirinti { justify-content: center; }
.sayfa-hero > .kap:not(.yazi-govde) h1 { margin-inline: auto; max-width: 22ch; text-wrap: balance; }
.sayfa-hero > .kap:not(.yazi-govde) .ozet { margin-inline: auto; }
.sayfa-hero > .kap:not(.yazi-govde) .hero-butonlar,
.sayfa-hero > .kap:not(.yazi-govde) .hero-guven { justify-content: center; }

.hizmet-hero-ozet {
    max-width: 680px; margin: 0 auto; color: var(--soluk);
    font-size: 18px; line-height: 1.7;
}
.sayfa-hero .ozet { font-size: 18px; color: var(--soluk); max-width: 58ch; }
.kirinti { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--soluk); margin-bottom: 22px; }
.kirinti a:hover { color: var(--mor); }
.kirinti svg { opacity: .5; }

/* ---------- Hizmet detay ---------- */
.detay-izgara { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.detay-metin p { color: var(--soluk); font-size: 17px; margin-bottom: 18px; }
.sonuc-kutu {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px;
    padding: 40px 36px; text-align: center;
    box-shadow: var(--golge);
    position: sticky; top: 100px;
}
.sonuc-kutu .buyuk-deger {
    font-family: var(--baslik-font); font-size: 64px; font-weight: 800;
    background: linear-gradient(120deg, var(--mor-canli), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.sonuc-kutu p { color: var(--soluk); margin: 12px 0 26px; }
.sonuc-kutu .btn { width: 100%; justify-content: center; }
.sonuc-kutu .mini-not { font-size: 13px; margin: 14px 0 0; }

/* Hizmet girisi: uzun metin yerine tarayarak okunan vurgu kartlari */
.giris-metin { font-size: 18.5px !important; line-height: 1.7; color: var(--murekkep) !important; }
.vurgu-izgara {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px;
}
.vurgu-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
    padding: 26px 24px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s var(--yumusak);
}
.vurgu-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: var(--mor-cizgi); }
.vurgu-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
    background: var(--mor-acik); color: var(--mor);
}
.vurgu-kart b {
    display: block; font-family: var(--baslik-font); font-size: 17.5px;
    font-weight: 700; margin-bottom: 7px;
}
.vurgu-kart p { color: var(--soluk); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* Zaman cizgisi: sureci metin yerine gorsel olarak anlatir */
.zaman-cizgisi {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
    margin-top: 52px; position: relative;
}
.zaman-cizgisi-baslik {
    font-family: var(--baslik-font); font-size: 13px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--soluk);
    margin: 48px 0 -34px;
}
.zaman-cizgisi::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 7px; height: 2px;
    background: linear-gradient(90deg, var(--mor-cizgi), var(--mor-canli));
    border-radius: 2px;
}
.zc-adim { position: relative; padding-top: 30px; }
.zc-nokta {
    position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
    background: var(--yuzey); border: 3px solid var(--mor-canli);
}
.zc-adim b {
    display: block; font-family: var(--baslik-font); font-size: 16px;
    font-weight: 700; color: var(--mor); margin-bottom: 5px;
}
.zc-adim p { color: var(--soluk); font-size: 15px; line-height: 1.55; margin: 0; }

/* Gomulu harita: sayfa genisligiyle hizali, yuvarlak koseli kart */
.harita-sar {
    position: relative; width: min(1180px, 100% - 48px);
    margin: 8px auto 0; height: 420px;
    overflow: hidden; border-radius: 24px;
    border: 1px solid var(--cizgi); background: var(--zemin-koyu);
    box-shadow: var(--golge);
}
.harita-sar iframe { width: 100%; height: 100%; display: block; border: 0; }
.harita-not { text-align: center; margin-top: 28px; }

/* Footer adres blogu */
/* Footer is ortakligi seridi */
.ortaklik-serit {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px;
    padding: 24px 0; border-top: 1px solid rgba(255,255,255,.09);
}
/* .alt-bilgi ul kurali tum footer listelerini dikey diziyor;
   rozet seridi icin yatay diziliste israr et. */
.alt-bilgi .ortaklik-liste { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
.ortaklik-baslik {
    font-size: 12px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; opacity: .5;
}
.ortaklik-liste {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
    list-style: none; margin: 0; padding: 0;
}
.ortaklik-liste li { display: flex; align-items: center; gap: 10px; }
.ortaklik-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.08);
}
.ortaklik-metin b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.ortaklik-metin small { display: block; font-size: 12.5px; opacity: .6; line-height: 1.4; }

/* E-posta yer tutucusu: JS baglantiyi kurana kadar ayni gorunsun,
   sayfa yuklenirken gorsel sicrama olmasin. */
.ep-baglanti { cursor: pointer; }
.ep-baglanti.btn { display: inline-flex; }

/* Footer marka sutunundaki iletisim listesi: ikon + metin hizali */
.alt-marka-iletisim { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.alt-marka-iletisim li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.alt-marka-iletisim svg { flex-shrink: 0; margin-top: 3px; opacity: .55; }
.alt-marka-iletisim address { font-style: normal; }

/* Yalnizca ekran okuyucular icin: gorsel olarak gizli ama erisilebilir */
.gizli-metin {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Paket karsilastirma tablosu */
.paket-tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.paket-tablo {
    width: 100%; border-collapse: separate; border-spacing: 0;
    min-width: 720px;
}
.paket-tablo th, .paket-tablo td {
    padding: 16px 18px; text-align: center; vertical-align: middle;
    border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
.paket-tablo thead th {
    vertical-align: bottom; padding: 26px 18px 24px;
    border-bottom: 1px solid var(--cizgi);
}
.paket-tablo thead th.pt-ozellik { background: transparent; border-bottom-color: transparent; }
.paket-tablo thead th b {
    display: block; font-family: var(--baslik-font); font-size: 21px;
    font-weight: 800; margin-bottom: 3px;
}
.paket-tablo thead th small { display: block; color: var(--soluk); font-size: 13.5px; }
.pt-fiyat {
    display: block; font-family: var(--baslik-font); font-size: 30px;
    font-weight: 800; color: var(--mor); margin: 14px 0 16px;
}
.paket-tablo thead .btn { width: 100%; justify-content: center; }
.pt-rozet {
    display: inline-block; margin-bottom: 10px; padding: 5px 11px;
    background: var(--mor); color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
/* Ozellik sutunu sola dayali okunur */
.pt-ozellik { text-align: left !important; min-width: 260px; }
.pt-ozellik b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.pt-ozellik small { display: block; color: var(--soluk); font-size: 13.5px; line-height: 1.5; font-weight: 400; }
/* Grup basligi */
.pt-grup th {
    text-align: left !important; background: var(--zemin-koyu) !important;
    font-family: var(--baslik-font); font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
    padding: 12px 18px !important;
}
/* One cikan sutun dikey olarak vurgulanir */
.paket-tablo .pt-one-cikan { background: var(--mor-acik); }
.paket-tablo thead th.pt-one-cikan { border-radius: 18px 18px 0 0; }
.paket-tablo tbody:last-child tr:last-child .pt-one-cikan { border-radius: 0 0 18px 18px; }
.pt-sayi { font-family: var(--baslik-font); font-size: 19px; font-weight: 800; }
.pt-var {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #DCFCE7; color: #15803D;
}
.pt-yok { display: inline-flex; color: var(--soluk); opacity: .5; }
.paket-notlar {
    list-style: none; margin: 26px auto 0; padding: 0; max-width: 760px;
    display: flex; flex-direction: column; gap: 8px;
}
.paket-notlar li {
    position: relative; padding-left: 20px;
    color: var(--soluk); font-size: 14.5px; line-height: 1.6;
}
.paket-notlar li::before {
    content: ''; position: absolute; left: 4px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--mor-cizgi);
}

/* Ayrintili anlatim: varsayilan kapali, isteyen acar */
.derin-anlatim {
    margin-top: 44px; border: 1px solid var(--cizgi); border-radius: 18px;
    background: var(--yuzey); overflow: hidden;
}
.derin-ac {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 26px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--baslik-font); font-size: 17px; font-weight: 700; color: var(--murekkep);
}
.derin-ok {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--mor-acik); color: var(--mor);
    transition: transform .35s var(--yumusak);
}
.derin-anlatim.acik .derin-ok { transform: rotate(180deg); }
.derin-govde {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--yumusak);
}
.derin-anlatim.acik .derin-govde { grid-template-rows: 1fr; }
.derin-govde-ic { overflow: hidden; }
.derin-govde-ic p {
    color: var(--soluk); font-size: 16.5px; line-height: 1.75;
    padding: 0 26px; margin: 0 0 16px;
}
.derin-govde-ic p:first-child { padding-top: 4px; }
.derin-govde-ic p:last-child { margin-bottom: 24px; }

/* Uzun adresler ve kesintisiz kelimeler satiri asip yatay kaydirma
   olusturabiliyor (or. sozlukteki ornek URL'ler). Metin bloklarinda
   kirilmaya izin ver; kirpma degil sarma yapilir. */
p, li, dd, td, h1, h2, h3, h4, .ozellik-kart, .vurgu-kart, .sozluk-kart {
    overflow-wrap: break-word;
}

/* Izgara kolonlarinda "1fr" varsayilan olarak minmax(auto, 1fr) demektir ve
   icerigin minimum genisligi kolonu sisirebilir; bu da mobilde yatay tasmaya
   yol acar. minmax(0, 1fr) ve min-width:0 bunu engeller. */
.hizmet-izgara, .ozellik-izgara, .blog-izgara, .deger-izgara,
.yorum-izgara, .surec-izgara, .vurgu-izgara, .zaman-cizgisi,
.arac-vitrin, .harita-izgara, .seffaflik-izgara { min-width: 0; }
.hizmet-izgara > *, .ozellik-izgara > *, .blog-izgara > *, .deger-izgara > *,
.yorum-izgara > *, .surec-izgara > *, .vurgu-izgara > *, .zaman-cizgisi > *,
.arac-vitrin > *, .harita-izgara > *, .seffaflik-izgara > * { min-width: 0; }

.ozellik-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ozellik-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 26px 24px; transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak); }
.ozellik-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.ozellik-kart .tik {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor); margin-bottom: 14px;
}
.ozellik-kart h3 { font-size: 17px; margin-bottom: 7px; }
.ozellik-kart p { color: var(--soluk); font-size: 14.5px; }

/* ---------- Paket karşılaştırma tablosu ---------- */
.karsilastirma-sar {
    overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 20px;
    background: var(--yuzey); box-shadow: var(--golge);
}
.karsilastirma { width: 100%; border-collapse: collapse; min-width: 640px; }
.karsilastirma thead th {
    padding: 22px 18px; text-align: center; vertical-align: bottom;
    border-bottom: 2px solid var(--cizgi); background: var(--zemin);
}
.karsilastirma thead th:first-child {
    text-align: left; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
}
.ks-ad { display: block; font-family: var(--baslik-font); font-size: 18px; font-weight: 700; }
.ks-fiyat { display: block; font-family: var(--baslik-font); font-size: 22px; font-weight: 800; color: var(--mor); margin-top: 4px; }
.ks-fiyat small { font-size: 12.5px; font-weight: 600; color: var(--soluk); font-family: var(--metin-font); }
.ks-fiyat-teklif { font-size: 15px !important; font-weight: 700 !important; }

.karsilastirma tbody th[scope="row"] {
    text-align: left; padding: 13px 18px; font-size: 14.5px; font-weight: 500;
    border-bottom: 1px solid var(--cizgi); color: var(--murekkep);
}
.karsilastirma tbody td {
    padding: 13px 18px; text-align: center; font-size: 14.5px;
    border-bottom: 1px solid var(--cizgi);
}
.karsilastirma tbody tr:hover th[scope="row"], .karsilastirma tbody tr:hover td { background: var(--zemin); }

.ks-grup th {
    padding: 16px 18px 10px !important;
    background: var(--zemin-koyu) !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .08em; text-transform: uppercase; color: var(--mor) !important;
    border-bottom: 1px solid var(--cizgi);
}
.ks-var { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E8F7EE; color: #15803D; }
.ks-yok { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--zemin-koyu); color: var(--soluk); }
.ks-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-deger { font-weight: 600; }
.one-cikan-sutun { background: rgba(124, 58, 237, .05); }
.karsilastirma thead th.one-cikan-sutun { background: var(--mor-acik); }
.ks-son th, .ks-son td { border-bottom: 0 !important; padding-top: 20px !important; padding-bottom: 24px !important; }
.ks-son .btn { justify-content: center; }

/* ---------- Kariyer: açık pozisyonlar ---------- */
.pozisyon-liste { display: flex; flex-direction: column; gap: 20px; max-width: 860px; margin-inline: auto; }
.pozisyon-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 30px 32px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s;
}
.pozisyon-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: var(--mor-cizgi); }
.pozisyon-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pozisyon-ust h3 { font-size: 21px; margin-bottom: 10px; }
.pozisyon-etiketler { display: flex; flex-wrap: wrap; gap: 7px; }
.pozisyon-ozet { color: var(--soluk); font-size: 15.5px; margin: 16px 0 18px; line-height: 1.6; }
.pozisyon-alt-baslik { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.pozisyon-liste-ic { display: flex; flex-direction: column; gap: 9px; }
.pozisyon-liste-ic li {
    position: relative; padding-left: 20px; color: var(--soluk); font-size: 14.5px; line-height: 1.55;
}
.pozisyon-liste-ic li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--mor-canli);
}

/* ---------- Site haritası ---------- */
.harita-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: start; }
.harita-blok {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
    padding: 26px 26px 22px;
}
.harita-blok h2 {
    display: flex; align-items: center; gap: 9px;
    font-size: 17px; margin-bottom: 6px;
}
.harita-blok h2 span {
    font-size: 12px; font-weight: 700; font-family: var(--metin-font);
    background: var(--mor-acik); color: var(--mor); border: 1px solid var(--mor-cizgi);
    padding: 2px 9px; border-radius: 999px;
}
.harita-aciklama { color: var(--soluk); font-size: 13.5px; margin-bottom: 14px; line-height: 1.5; }
.harita-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.harita-liste a {
    display: block; padding: 6px 8px; margin-left: -8px; border-radius: 8px;
    font-size: 14.5px; color: var(--soluk); transition: background .2s, color .2s;
}
.harita-liste a:hover { background: var(--mor-acik); color: var(--mor); }

/* ---------- Anasayfa araç vitrini ---------- */
.arac-vitrin { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.arac-vitrin-grup {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px;
    padding: 22px 20px;
    transition: transform .28s var(--yumusak), box-shadow .28s var(--yumusak), border-color .28s;
}
.arac-vitrin-grup:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: var(--mor-cizgi); }
.avg-ikon {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
    transition: background .28s, color .28s;
}
.arac-vitrin-grup:hover .avg-ikon { background: var(--mor); color: #fff; }
.arac-vitrin-grup b { font-size: 15.5px; line-height: 1.3; }
.arac-vitrin-grup small { color: var(--soluk); font-size: 13px; }

/* ---------- Kısa cevap bloğu (GEO) ---------- */
.geo-ozet {
    background: var(--yuzey);
    border: 1px solid var(--mor-cizgi);
    border-left: 4px solid var(--mor);
    border-radius: 18px;
    padding: 26px 30px;
    margin-bottom: 34px;
    box-shadow: var(--golge);
}
.geo-ozet-baslik { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.geo-ozet-ikon {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
}
.geo-ozet h2 { font-size: 19px; margin: 0; }
.geo-ozet-cevap { font-size: 17px; color: #3B3560; line-height: 1.65; }
.geo-ozet-liste {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 26px; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--cizgi);
}
.geo-ozet-liste dt {
    font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--soluk); margin-bottom: 3px;
}
.geo-ozet-liste dd { font-size: 15.5px; font-weight: 600; color: var(--murekkep); }

/* ---------- Şeffaflık notu (uyarı kutusu) ---------- */
.durustluk-notu {
    display: flex; gap: 15px; align-items: flex-start;
    background: #FFFBEB; border: 1px solid #FDE68A;
    border-left: 4px solid var(--amber);
    border-radius: 16px; padding: 22px 26px; margin-top: 34px;
}
.durustluk-notu .dn-ikon {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: #FEF3C7; color: #B45309;
}
.durustluk-notu p { color: #713F12; font-size: 15px; line-height: 1.6; }
.durustluk-notu strong { color: #78350F; }

/* ---------- Yaptıklarımız / Yapmadıklarımız ---------- */
.seffaflik-izgara { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; }
.seffaflik-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 30px 30px 32px;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak);
}
.seffaflik-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.seffaflik-kart h3 { display: flex; align-items: center; gap: 11px; font-size: 19px; margin-bottom: 18px; }
.seffaflik-kart .sf-ikon {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center;
}
.seffaflik-kart.olumlu { border-top: 4px solid #16A34A; }
.seffaflik-kart.olumlu .sf-ikon { background: #E8F7EE; color: #15803D; }
.seffaflik-kart.olumsuz { border-top: 4px solid #DC2626; }
.seffaflik-kart.olumsuz .sf-ikon { background: #FDEDED; color: #B91C1C; }
.seffaflik-kart ul { display: flex; flex-direction: column; gap: 13px; }
.seffaflik-kart li {
    position: relative; padding-left: 20px;
    color: var(--soluk); font-size: 15px; line-height: 1.6;
}
.seffaflik-kart li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; border-radius: 50%;
}
.seffaflik-kart.olumlu li::before { background: #16A34A; }
.seffaflik-kart.olumsuz li::before { background: #DC2626; }

.diger-hizmetler { display: flex; flex-wrap: wrap; gap: 12px; }
.diger-hizmetler a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 999px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    font-size: 14.5px; font-weight: 600;
    transition: border-color .25s, background .25s, transform .25s var(--yumusak);
}
.diger-hizmetler a:hover { border-color: var(--mor-cizgi); background: var(--mor-acik); transform: translateY(-2px); }

/* ---------- Hakkımızda ---------- */
.deger-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.hakkimizda-metin { max-width: 760px; }
.hakkimizda-metin p { color: var(--soluk); font-size: 17.5px; margin-bottom: 20px; }
.hakkimizda-metin strong { color: var(--murekkep); }
.buyuk-alinti {
    font-family: var(--baslik-font); font-size: clamp(22px, 2.8vw, 30px); font-weight: 700;
    line-height: 1.35; color: var(--murekkep);
    border-left: 4px solid var(--mor-canli);
    padding: 6px 0 6px 26px; margin: 36px 0;
}
.buyuk-alinti em { font-style: normal; color: var(--mor); }

/* ---------- Blog ---------- */
.blog-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.blog-kart {
    display: flex; flex-direction: column;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px;
    overflow: hidden;
    transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak);
}
.blog-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.blog-kapak { aspect-ratio: 16/9; display: grid; place-items: center; position: relative; overflow: hidden; }
.blog-kapak svg { width: 54px; height: 54px; color: rgba(255,255,255,.9); }
.blog-kart-ic { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--soluk); margin-bottom: 12px; }
.blog-kategori { color: var(--mor); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.blog-kart h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
.blog-kart .ozet { color: var(--soluk); font-size: 14.5px; flex: 1; }
.blog-kart .kart-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; font-size: 14.5px; color: var(--mor); }

/* Blog kategori filtresi */
.filtre-serit { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filtre-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--yuzey); border: 1.5px solid var(--cizgi);
    font-size: 14.5px; font-weight: 600; color: var(--soluk);
    transition: border-color .25s, background .25s, color .25s, transform .25s var(--yumusak);
}
.filtre-btn span {
    font-size: 12px; font-weight: 700;
    background: var(--zemin-koyu); color: var(--soluk);
    padding: 2px 8px; border-radius: 999px;
    transition: background .25s, color .25s;
}
.filtre-btn:hover { border-color: var(--mor-cizgi); color: var(--murekkep); transform: translateY(-2px); }
.filtre-btn.aktif { background: var(--mor); border-color: var(--mor); color: #fff; }
.filtre-btn.aktif span { background: rgba(255,255,255,.22); color: #fff; }
.filtre-bos { text-align: center; color: var(--soluk); padding: 40px 0; }

/* Yazı içi "İçindekiler" */
.icindekiler {
    background: var(--zemin-koyu); border: 1px solid var(--cizgi);
    border-radius: 18px; padding: 24px 28px; margin-bottom: 36px;
}
.icindekiler b {
    display: block; font-family: var(--baslik-font); font-size: 16px;
    margin-bottom: 12px;
}
.icindekiler ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; list-style: decimal; }
.icindekiler li { color: var(--soluk); font-size: 15.5px; }
.icindekiler a { color: var(--mor); font-weight: 500; transition: color .2s; }
.icindekiler a:hover { color: var(--mor-canli); text-decoration: underline; }

.yazi-govde { max-width: 740px; margin-inline: auto; }
.yazi-govde h2 { scroll-margin-top: 96px; }
.yazi-govde p { color: #453F63; font-size: 17.5px; margin-bottom: 22px; }
.yazi-govde h2 { font-size: 27px; margin: 40px 0 16px; }
.yazi-govde h3 { font-size: 21px; margin: 32px 0 12px; }
.yazi-govde ul, .yazi-govde ol { margin: 0 0 22px 22px; color: #453F63; font-size: 17px; display: flex; flex-direction: column; gap: 8px; }
.yazi-govde ul { list-style: disc; }
.yazi-govde ol { list-style: decimal; }
.yazi-kapak { border-radius: 24px; margin-bottom: 40px; aspect-ratio: 21/9; display: grid; place-items: center; }
.yazi-kapak svg { width: 72px; height: 72px; color: rgba(255,255,255,.9); }

/* ---------- İletişim ---------- */
.iletisim-izgara { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.iletisim-bilgi-kart {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
    padding: 22px 24px; margin-bottom: 14px;
    transition: border-color .25s, transform .25s var(--yumusak);
}
.iletisim-bilgi-kart:hover { border-color: var(--mor-cizgi); transform: translateX(4px); }
.iletisim-bilgi-kart .ib-ikon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--mor-acik); color: var(--mor);
}
.iletisim-bilgi-kart b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.iletisim-bilgi-kart span, .iletisim-bilgi-kart a.deger { color: var(--soluk); font-size: 15px; }
.iletisim-bilgi-kart a.deger:hover { color: var(--mor); }

.form-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px;
    padding: 42px; box-shadow: var(--golge);
}
.form-kart h2 { font-size: 24px; margin-bottom: 8px; }
.form-kart > p { color: var(--soluk); font-size: 15px; margin-bottom: 28px; }
.form-izgara { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.form-alan { display: flex; flex-direction: column; gap: 7px; }
.form-alan.genis { grid-column: 1 / -1; }
.form-alan label { font-size: 14px; font-weight: 600; }
.form-alan label i { font-style: normal; color: var(--mor-canli); }
.form-alan input, .form-alan select, .form-alan textarea {
    font: inherit; font-size: 15px; color: var(--murekkep);
    background: var(--zemin); border: 1.5px solid var(--cizgi); border-radius: 12px;
    padding: 13px 16px; width: 100%;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.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(--mor-canli); background: #fff;
    box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.form-gonder { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-gonder .btn { padding: 15px 34px; }
.form-gonder small { color: var(--soluk); }

.uyari {
    grid-column: 1 / -1;
    padding: 15px 20px; border-radius: 13px; font-size: 15px; font-weight: 500;
    margin-bottom: 4px;
}
.uyari-basari { background: #E8F7EE; color: #14532D; border: 1px solid #BBE7CC; }
.uyari-hata { background: #FDEDED; color: #7F1D1D; border: 1px solid #F5C6C6; }

/* ---------- Duyarlılık ---------- */

/* Küçük laptop / büyük tablet: menü hâlâ yatay ama daha derli toplu */
@media (max-width: 1240px) and (min-width: 1081px) {
    .kap { width: min(1180px, 100% - 40px); }
    .ana-menu > a, .menu-grup > a { padding: 9px 11px; font-size: 14.5px; }
    .ust-bar-sag { gap: 12px; }
    .tel-link { display: none; }
    .alt-menu { width: 460px; }
    .hero-ic { gap: 36px; }
}

@media (max-width: 1080px) {
    .ana-menu { display: none; }
    .menu-dugme { display: flex; }
    .tel-link { display: none; }

    .ana-menu.mobil-acik {
        display: flex; flex-direction: column; align-items: stretch; gap: 2px;
        /* Menü ekranın tamamını kaplar. Üst bar sticky olduğu için sayfa
           kaydırıldığında menünün konumu değişiyor ve top:74px verildiğinde
           altta 74px'lik bir şerit açık kalıyordu; oradan arkadaki içerik
           görünüyordu. Bunun yerine menü tepeden başlar, üst barın altında
           kalması için üst iç boşluk verilir. */
        position: fixed; top: 0; left: 0; right: 0; z-index: 99;
        background: var(--zemin);
        /* Üst boşluk kapatma butonunu barındıracak kadar; alt boşluk
           iletişim bölümü için yeterli. Eskiden 94px/48px idi ve menü
           üstte ve altta gereksiz boş duruyordu. */
        padding: 68px 24px 24px; overflow-y: auto;
        /* Menü, .ust-bar-ic flex satırının çocuğudur. position:fixed olsa da
           tarayıcı onu flex öğesi gibi boyutlandırıyor: flex:none bunu
           engeller, yükseklik ise açıkça veriliyor (bottom/inset bu bağlamda
           çalışmıyor). dvh mobil tarayıcı çubuklarını hesaba katar. */
        flex: none;
        height: 100vh;
        height: 100dvh;
        /* Menüyü kendi çizim katmanına al. Flex satırı içinde duran bir
           position:fixed öğede bazı tarayıcılar ilk açılışta düzeni eski
           değerlerle çiziyor; ekrana dokunulunca yeniden çizilip düzeliyordu.
           translateZ(0) tarayıcıyı katmanı baştan doğru kurmaya zorlar.
           (contain kullanılmadı: içeriği kırpma riski var.) */
        transform: translateZ(0);
    }
    .ana-menu.mobil-acik > a, .ana-menu.mobil-acik .menu-grup > a {
        font-size: 18px; padding: 14px 12px; border-radius: 12px;
    }
    /* Mobilde gruplar akordiyon gibi davranır: alt menü varsayılan kapalıdır,
       başlığa dokununca açılır. Aksi hâlde 11 hizmet ve alt başlıkları birden
       dökülüyor ve liste kullanılamayacak kadar uzuyordu. */
    .menu-grup { display: block; }
    .menu-grup > a { justify-content: space-between; }
    .menu-grup > a svg { transition: transform .3s var(--yumusak); flex-shrink: 0; }
    .menu-grup.acik > a svg { transform: rotate(180deg); }
    .alt-menu {
        /* Masaüstünde bu blok 520px genişliğinde, left:50% ve
           translateX(-50%) ile ortalanan bir açılır kutudur. Mobilde bu
           değerlerin hepsi sıfırlanmazsa menü 520px kalıp ekranın soluna
           taşıyor ve içerik kenardan kesiliyor. */
        position: static; inset: auto; transform: none;
        opacity: 1; visibility: visible;
        width: 100%; max-width: 100%; min-width: 0;
        grid-template-columns: minmax(0,1fr); box-shadow: none;
        border: 0; background: transparent; padding: 0 0 0 12px;
        /* Varsayılan kapalı. max-height ile aç/kapa yapılır; bağlantılar
           DOM'da kalır, yalnızca görsel olarak gizlenir. */
        /* Kapalıyken dikey dolgu da sıfırlanır; aksi hâlde max-height:0
           olmasına rağmen dolgu kadar yükseklik kalıyor ve kapalı grubun
           altında ince bir boşluk görünüyordu. */
        max-height: 0; overflow: hidden;
        padding-top: 0; padding-bottom: 0;
        transition: max-height .35s var(--yumusak), padding .35s var(--yumusak);
    }
    .menu-grup.acik > .alt-menu { max-height: 1400px; padding-top: 6px; padding-bottom: 6px; }

    /* Masaüstündeki açılır menü kuralı ".menu-grup:hover/:focus-within
       .alt-menu { transform: translateX(-50%) }" mobilde de tetikleniyordu:
       parmakla veya fareyle tıklandığında bağlantı odak aldığı için
       :focus-within devreye giriyor ve menü yarı genişliği kadar sola
       kayıyordu (342px genişlikte -171px). Klavye/JS ile tıklamada odak
       oluşmadığı için sorun görünmüyordu. Mobilde bu dönüşüm iptal edilir. */
    .menu-grup:hover > .alt-menu,
    .menu-grup:focus-within > .alt-menu { transform: none; }

    /* Menü içi kapatma butonu (sağ üst) */
    .ana-menu.mobil-acik .menu-kapat {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 16px; right: 20px;
        width: 40px; height: 40px; padding: 0;
        background: var(--yuzey); border: 1px solid var(--cizgi);
        border-radius: 50%; color: var(--murekkep); cursor: pointer;
    }
    .menu-kapat:active { background: var(--zemin-koyu); }

    /* Menü altındaki iletişim bölümü */
    .ana-menu.mobil-acik .menu-iletisim {
        margin-top: 22px; padding-top: 18px;
        border-top: 1px solid var(--cizgi);
        display: flex; flex-direction: column; gap: 2px;
    }
    .mi-satir {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; border-radius: 10px;
        font-size: 15px; color: var(--soluk);
    }
    .mi-satir svg { flex-shrink: 0; opacity: .6; }
    .mi-satir:active { background: var(--zemin-koyu); }
    .menu-sosyal { display: flex; gap: 10px; margin: 14px 0 0 12px; }
    .menu-sosyal a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: 12px;
        background: var(--yuzey); border: 1px solid var(--cizgi);
        color: var(--mor);
    }
    .menu-sosyal a:active { background: var(--mor-acik); }
    /* Mobilde 29 aracı tek tek listelemek menüyü kullanılamaz hâle getirir;
       yalnızca grup başlıkları gösterilir, tıklanınca araç merkezine gidilir. */
    /* Araçlar menüsü masaüstünde 760px; mobilde tam sıfırlanmazsa taşar. */
    .alt-menu-araclar {
        width: 100%; max-width: 100%; min-width: 0;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 4px;
        /* Yatay dolgu her zaman; dikey dolgu yalnızca açıkken (aşağıda).
           Kısayol "padding" yazılırsa kapalı durumdaki sıfırlama ezilir. */
        padding-left: 12px; padding-right: 0;
    }
    /* Mobilde 29 aracın tamamı listelenmez; yalnızca grup başlıkları kalır.
       :not() olmadan bu kural grup başlığını da gizliyordu ve menü boş
       görünüyordu. */
    .alt-menu-sutun a:not(.alt-menu-grup) { display: none; }
    .alt-menu-grup {
        display: block; padding: 11px 12px; margin: 0;
        font-size: 13.5px; letter-spacing: .04em;
        background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px;
        text-transform: none; font-weight: 600; color: var(--murekkep);
    }
    .alt-menu-tumu { text-align: left; grid-column: 1 / -1; border-top: 0; padding: 11px 12px !important; }
    /* Sayfa girişindeki üst boşluk mobilde 76px'ti ve üst barın hemen
       altında gereksiz genişlik yaratıyordu. Bu kural daha önce yalnızca
       380px altındaki ekranlarda vardı; 390px'lik telefonlar kapsam dışı
       kalıyordu. */
    .sayfa-hero { padding: 40px 0 44px; }

    .hero-ic, .detay-izgara, .iletisim-izgara { grid-template-columns: minmax(0,1fr); }
    .hero-gorsel { min-height: 380px; }
    .hizmet-izgara, .ozellik-izgara, .blog-izgara, .deger-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .vurgu-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .yorum-izgara, .guvence-serit, .seffaflik-izgara { grid-template-columns: minmax(0,1fr); }
    .arac-vitrin { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .harita-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .vaka-satir { grid-template-columns: minmax(0,1fr); }
    .vaka-satir-kapak { min-height: 160px; }
    .surec-izgara, .sayilar-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: 36px; }
    .fiyat-izgara { grid-template-columns: minmax(0,1fr); max-width: 460px; margin-inline: auto; }
    .cta-band-ic { grid-template-columns: minmax(0,1fr); padding: 44px 32px; }
    .alt-bilgi-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; }
    .sonuc-kutu { position: static; }
    .bolum { padding: 76px 0; }
    .hero-guven { gap: 16px; }
    .vaka-hikaye { max-width: none; }
    .vaka-alinti { max-width: none; }
    /* Dokunmatik cihazlarda hover efektlerini sıfırla */
    .hero-gorsel:hover .panel-kart-buyuk,
    .hero-gorsel:hover .panel-kart-orta,
    .hero-gorsel:hover .panel-kart-kucuk { transform: none; }
}

/* Küçük tablet / büyük telefon: iki kolonlu ızgaralar tek kolona iner */
@media (max-width: 860px) {
    .hizmet-izgara, .ozellik-izgara, .blog-izgara, .deger-izgara { grid-template-columns: minmax(0,1fr); }
    .surec-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .alt-bilgi-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .oncesonra-baslik, .oncesonra-satir { padding: 16px 20px; gap: 12px; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .kap { width: min(1180px, 100% - 36px); }
    .bolum { padding: 64px 0; }
    .hizmet-izgara, .ozellik-izgara, .blog-izgara, .deger-izgara, .form-izgara { grid-template-columns: minmax(0,1fr); }
    .surec-izgara { grid-template-columns: minmax(0,1fr); }
    /* Vurgu kartlari ve zaman cizgisi tek kolona iner; cizgi dikeye doner */
    .vurgu-izgara { grid-template-columns: minmax(0,1fr); }
    .zaman-cizgisi { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .zaman-cizgisi::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
        background: linear-gradient(180deg, var(--mor-cizgi), var(--mor-canli)); }
    .zc-adim { padding-top: 0; padding-left: 30px; }
    .zc-nokta { top: 2px; }
    .derin-ac { padding: 18px 20px; font-size: 16px; }
    .derin-govde-ic p { padding: 0 20px; font-size: 16px; }

    .harita-sar { height: 300px; }

    /* Mobilde parmakla rahat tiklanmasi icin footer ve icindekiler
       baglantilarina dikey nefes payi verilir. */
    .alt-bilgi ul { gap: 4px; }
    .alt-bilgi ul a { display: inline-block; padding: 7px 0; }
    .alt-bilgi-yasal a { display: inline-block; padding: 6px 0; }
    .icindekiler ol a { display: inline-block; padding: 5px 0; }

    /* Paket tablosu mobilde yatay kaydirma yerine kart olarak istiflenir */
    .paket-tablo { min-width: 0; display: block; }
    .paket-tablo thead, .paket-tablo tbody { display: block; }
    .paket-tablo thead tr, .paket-tablo tbody tr { display: block; }
    .paket-tablo thead th.pt-ozellik, .pt-grup { display: none; }
    .paket-tablo thead tr {
        display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 26px;
    }
    .paket-tablo thead th {
        display: block; border: 1px solid var(--cizgi); border-radius: 18px;
        padding: 22px 20px;
    }
    .paket-tablo thead th.pt-one-cikan { border-radius: 18px; border-color: var(--mor-cizgi); }
    .paket-tablo tbody tr {
        border: 1px solid var(--cizgi); border-radius: 16px;
        margin-bottom: 12px; overflow: hidden;
    }
    .paket-tablo tbody th.pt-ozellik {
        display: block; background: var(--zemin-koyu); border-bottom: 1px solid var(--cizgi);
        min-width: 0; padding: 14px 16px;
    }
    .paket-tablo tbody td {
        display: flex; align-items: center; justify-content: space-between;
        text-align: right; padding: 11px 16px; border-bottom: 1px solid var(--cizgi);
        border-radius: 0 !important;
    }
    .paket-tablo tbody tr td:last-child { border-bottom: 0; }
    /* Hangi pakete ait oldugu satir basinda yazsin */
    .paket-tablo tbody td::before {
        content: attr(data-etiket); color: var(--soluk);
        font-size: 14px; font-weight: 600; text-align: left;
    }
    .hero { padding: 56px 0 48px; }
    .hero-rozetler { gap: 18px; }
    /* Mobilde yüzen kartlar üst üste binmesin: normal akışta istifle */
    .hero-gorsel { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
    .panel-kart { position: static; animation-delay: .2s !important; }
    .panel-kart-buyuk, .panel-kart-orta, .panel-kart-kucuk { width: 100%; }
    .hero-blob { display: none; }
    .wa-sabit { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .form-kart { padding: 28px 22px; }
    .cta-band-ic { padding: 36px 24px; }

    /* Araçlar */
    .arac-kap { width: min(880px, 100% - 36px); }
    .arac-form { padding: 24px 20px; }
    .arac-form-satir { flex-direction: column; }
    .arac-form .btn { justify-content: center; }
    .arac-form-izgara { grid-template-columns: minmax(0,1fr); }
    .arac-hero .arac-baslik { gap: 14px; }
    .arac-baslik-ikon { width: 50px; height: 50px; border-radius: 14px; }
    .arac-cta { padding: 24px 20px; flex-direction: column; align-items: stretch; }
    .arac-cta .btn { justify-content: center; }
    .ozet-kutular { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .kod-kutu { padding: 20px 16px; }
    .kopyala-btn { position: static; margin-bottom: 12px; display: block; }

    /* Önce/sonra tablosu mobilde kart düzenine geçer */
    .oncesonra-baslik { display: none; }
    .oncesonra-satir {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 16px;
        padding: 20px 22px;
    }
    .os-etiket { grid-column: 1 / -1; font-size: 15px; }
    .os-mobil-baslik {
        display: block; font-size: 11.5px; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
        margin-bottom: 2px;
    }
    .os-once, .os-sonra { display: flex; flex-direction: column; }
    .os-artis { grid-column: 1 / -1; justify-self: start; }
    .vaka-satir-ic { padding: 26px 24px; }
    .vaka-mini-metrik { gap: 20px; }
    .vaka-blok { padding: 26px 24px; }
    .vaka-alinti { padding: 30px 26px; }
    .alt-bilgi-izgara { grid-template-columns: minmax(0,1fr); }
    .sayilar { border-radius: 20px; padding: 48px 16px; }
}

/* Çok küçük ekranlar (iPhone SE ve altı) */
@media (max-width: 380px) {
    .kap { width: min(1180px, 100% - 28px); }
    body { font-size: 15.5px; }
    .hero h1 { font-size: 31px; }
    .hero-metin p { font-size: 16.5px; }
    .hero-btnler { flex-direction: column; align-items: stretch; }
    .hero-btnler .btn { justify-content: center; width: 100%; }
    .hero-ayirac { display: none; }
    .hero-guven { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hero-rozetler { gap: 16px; }
    .hero-rozet b { font-size: 22px; }
    .logo img { height: 34px; }
    .ust-bar-ic { height: 66px; gap: 10px; }
    .btn { padding: 13px 20px; font-size: 15px; }
    .btn-kucuk { padding: 9px 14px; font-size: 13.5px; }
    .bolum { padding: 52px 0; }
    .bolum-baslik { margin-bottom: 36px; }
    .bolum-baslik h2 { font-size: 25px; }
    .bolum-baslik p { font-size: 16px; }
    .surec-izgara { grid-template-columns: minmax(0,1fr); }
    .sayilar-izgara { grid-template-columns: minmax(0,1fr); row-gap: 28px; }
    .hizmet-kart, .ozellik-kart, .yorum-kart { padding: 24px 20px; }
    .fiyat-kart { padding: 28px 22px; }
    .fiyat b { font-size: 36px; }
    .sss-soru { padding: 17px 18px; font-size: 15.5px; }
    .sss-cevap p { padding: 0 18px 18px; font-size: 14.5px; }
    .form-kart { padding: 24px 18px; }
    .guvence-serit { padding: 22px 20px; }
    .geo-ozet { padding: 22px 20px; }
    .geo-ozet h2 { font-size: 17.5px; }
    .geo-ozet-cevap { font-size: 16px; }
    .geo-ozet-liste { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 18px; }
    .seffaflik-kart { padding: 24px 20px 26px; }
    .durustluk-notu { padding: 18px 20px; gap: 12px; }
    .vaka-vitrin-ust { padding: 24px 22px 22px; }
    .vaka-vitrin-ust b { font-size: 38px; }
    .vaka-vitrin-alt { padding: 20px 22px 24px; }
    .vaka-satir-ic { padding: 22px 20px; }
    .vaka-blok { padding: 22px 20px; }
    .vaka-alinti { padding: 26px 22px; }
    .oncesonra-satir { padding: 18px; }
    .os-sonra { font-size: 19px; }
    .cta-band-ic { padding: 30px 20px; }
    .sayfa-hero { padding: 46px 0 40px; }
    .yazi-govde p { font-size: 16.5px; }
    .yazi-govde h2 { font-size: 23px; }
}

/* Çok geniş ekranlarda içerik fazla yayılmasın */
@media (min-width: 1600px) {
    .kap { width: min(1280px, 100% - 64px); }
    .hero h1 { font-size: 66px; }
}

/* ---------- Baskı / PDF ----------
   Araç sonuçlarını yazdıran veya PDF olarak kaydeden kullanıcılar için:
   gezinme ve dekoratif öğeler çıkarılır, içerik siyah-beyaz okunur hâle gelir. */
@media print {
    .ust-bar, .alt-bilgi, .cta-band, .wa-sabit, .atla, .serit,
    .arac-cta, .diger-hizmetler, .menu-dugme, .ilerleme-kanal,
    .filtre-serit, .sn-sekmeler, .kopyala-btn, .arac-form button,
    .hero-gorsel, .hero-btnler, .btn { display: none !important; }

    * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
    body { font-size: 11pt; line-height: 1.45; }
    .kap, .arac-kap { width: 100%; max-width: none; }
    .bolum, .arac-bolum, .sayfa-hero { padding: 12pt 0 !important; }
    .gorun { opacity: 1 !important; transform: none !important; }

    h1 { font-size: 20pt; } h2 { font-size: 15pt; } h3 { font-size: 12pt; }
    h1, h2, h3, .arac-sonuc-baslik { page-break-after: avoid; }
    .veri-tablo-sar, .denetim-satir, .ozet-kutu, .geo-ozet,
    .sss-madde, .zincir-adim, .karsilastirma tr { page-break-inside: avoid; }

    .veri-tablo, .karsilastirma { border-collapse: collapse; width: 100%; }
    .veri-tablo th, .veri-tablo td,
    .karsilastirma th, .karsilastirma td { border: 1px solid #999 !important; padding: 4pt 6pt; }
    .veri-tablo-sar, .karsilastirma-sar { overflow: visible !important; border: 0 !important; }

    .durum, .ozet-kutu, .denetim-satir, .geo-ozet, .arac-bilgi, .arac-uyari {
        border: 1px solid #999 !important;
    }
    /* SSS ve içerik kutuları baskıda tamamen açık görünsün */
    .sss-cevap { grid-template-rows: 1fr !important; }
    .sss-cevap-ic { overflow: visible !important; }

    /* Bağlantı adreslerini metnin yanında göster */
    .yazi-govde a[href^="http"]::after,
    .geo-ozet a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; }

    @page { margin: 14mm; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .serit-ic, .btn-parlak::after { animation: none; }
    .btn-parlak::after { display: none; }
    html { scroll-behavior: auto; }
    .gorun { opacity: 1; transform: none; }
}

/* Dokunmatik cihazlarda hover'a bağlı efektleri kapat (mobilde takılı kalmasın) */
@media (hover: none) {
    .btn:hover, .hizmet-kart:hover, .yorum-kart:hover, .vaka-vitrin:hover,
    .vaka-satir:hover, .surec-adim:hover, .blog-kart:hover, .ozellik-kart:hover,
    .fiyat-kart:hover, .sayi-kutu:hover, .sosyal a:hover, .wa-sabit:hover,
    .iletisim-bilgi-kart:hover { transform: none; }
}

/* Dokunmatik ama GENİŞ ekranlarda (masaüstü düzeni geçerliyken) açılır menü
   hover ile açılamaz; görünür bırakılır.
   Not: min-width kaydı şart. Bu kural eskiden tüm dokunmatik cihazlarda
   geçerliydi ve mobildeki akordiyonu bozuyordu: .alt-menu tekrar grid olarak
   gösterilip masaüstü ölçüleriyle (520px, ortalanmış) çiziliyor, ekranın
   soluna taşıyordu. */
@media (hover: none) and (min-width: 1081px) {
    .alt-menu { display: grid; }
}