/* Finto tanıtım sitesi — bağımsız stil. Koyu lacivert + tuğla kırmızısı, krem zemin. */
:root{
    --marka:#d53815;
    --lacivert:#152433;
    --ink:#1a2430;
    --ink-soft:#5a6672;
    --line:#e7e4dd;
    --bg:#faf7f2;
    --bg-white:#ffffff;
    --yesil:#1c9d63;
    --radius:14px;
    --kap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marka);text-decoration:none}
a:hover{text-decoration:underline}
.kap{max-width:var(--kap);margin:0 auto;padding:0 24px}

/* ---------- Üst bar ---------- */
.site-ust{background:var(--bg-white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site-ust-ic{display:flex;align-items:center;gap:32px;height:78px}
.site-logo{display:flex;align-items:center;flex:none}
.site-logo img{height:38px;width:auto;max-width:170px;display:block}
.site-menu{display:flex;gap:30px;flex:1;justify-content:center;flex-wrap:wrap}
.site-menu a{color:var(--lacivert);font-weight:600;font-size:.96rem}
.site-menu a.aktif,.site-menu a:hover{color:var(--marka);text-decoration:none}
.site-ust-sag{display:flex;align-items:center;gap:18px;flex:none}
.site-giris-link{color:var(--lacivert);font-weight:600;font-size:.96rem}
.site-cta{background:var(--marka);color:#fff;padding:11px 22px;border-radius:10px;font-weight:700;font-size:.95rem;white-space:nowrap}
.site-cta:hover{filter:brightness(.93);text-decoration:none}

/* ---------- Flash ---------- */
.site-flash{padding:10px 0;font-size:.92rem}
.site-flash.ok{background:#e7f6ec;color:#166b3c}
.site-flash.err{background:#fdecec;color:#a12626}

.site-govde{padding-bottom:0}

/* ---------- Hero ---------- */
.hero{
    max-width:1340px;margin:0 auto;padding:64px 24px 40px;
    display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:56px;align-items:center;
}
.hero-badge{
    display:inline-block;border:1px solid rgba(213,56,21,.35);color:var(--marka);
    background:rgba(213,56,21,.05);border-radius:999px;padding:6px 16px;font-size:.85rem;font-weight:600;
}
.hero-h1{
    font-size:3.15rem;line-height:1.12;letter-spacing:-.025em;color:var(--lacivert);
    font-weight:800;margin:22px 0 0;
}
.hero-h1 .vurgu{color:var(--marka)}
.hero-alt{font-size:1.12rem;color:var(--ink-soft);margin:22px 0 0;max-width:30em}
.hero-btn{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-check{list-style:none;display:flex;gap:26px;margin:22px 0 0;padding:0;flex-wrap:wrap}
.hero-check li{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.92rem;font-weight:500}
.hero-check .ck{
    width:20px;height:20px;border-radius:50%;background:rgba(213,56,21,.12);color:var(--marka);
    display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex:none;
}

.btn{
    display:inline-block;background:var(--marka);color:#fff;padding:14px 28px;border-radius:11px;
    font-weight:700;border:0;cursor:pointer;font-size:1rem;text-align:center;
}
.btn:hover{filter:brightness(.93);text-decoration:none}
.btn.ghost{background:#fff;color:var(--marka);border:1.5px solid var(--marka)}
.btn.ghost:hover{background:rgba(213,56,21,.05);filter:none}

/* ---------- Ürün mockup ---------- */
.hero-gorsel{position:relative;min-width:0}
.mock{
    display:grid;grid-template-columns:150px 1fr;background:#fff;border:1px solid var(--line);
    border-radius:18px;box-shadow:0 30px 70px -30px rgba(21,36,51,.35),0 8px 22px -12px rgba(21,36,51,.15);
    overflow:hidden;min-height:440px;
}
.mock-side{background:var(--lacivert);padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.mock-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--marka),#e8663f);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.05rem;margin:2px 4px 14px}
.mock-nav{display:flex;align-items:center;gap:9px;color:#9fb0c0;font-size:.8rem;font-weight:500;padding:8px 9px;border-radius:8px}
.mock-nav i{font-style:normal;font-size:.85rem;opacity:.9}
.mock-nav.aktif{background:rgba(255,255,255,.09);color:#fff}
.mock-ana{padding:20px 22px;background:#fbfbfa;min-width:0}
.mock-ust{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mock-ust h3{margin:0;font-size:1.15rem;color:var(--lacivert);font-weight:700}
.mock-firma{font-size:.75rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:#fff}
.mock-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;min-width:0}
.kpi-e{font-size:.62rem;color:var(--ink-soft);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;font-size:1.02rem;color:var(--lacivert);margin:3px 0 1px;letter-spacing:-.02em}
.kpi small{font-size:.6rem;color:var(--ink-soft)}
.kpi.kritik b{color:var(--marka)}
.mock-grafik{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 12px 4px;margin-bottom:12px}
.mg-bas{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-soft);margin-bottom:6px}
.mg-bas strong{color:var(--lacivert);font-size:.82rem}
.mg-svg{width:100%;height:96px;display:block}
.mg-svg polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.l-gelir{stroke:#2f6fed}
.l-gider{stroke:var(--marka)}
.l-bakiye{stroke:var(--lacivert)}
.mock-islem{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}
.mock-islem strong{font-size:.82rem;color:var(--lacivert);display:block;margin-bottom:8px}
.mock-islem table{width:100%;border-collapse:collapse;font-size:.68rem}
.mock-islem td{padding:6px 4px;border-bottom:1px solid #f0efec;color:var(--ink-soft)}
.mock-islem tr:last-child td{border-bottom:0}
.mock-islem td.s{text-align:right;color:var(--lacivert);font-weight:600}
.mock-islem .d{padding:2px 7px;border-radius:6px;font-weight:600;font-size:.62rem}
.mock-islem .d.ok{background:#e7f6ec;color:#166b3c}
.mock-islem .d.bek{background:#fdf0e2;color:#a5641b}

.mock-rozet{
    position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;
    box-shadow:0 16px 36px -16px rgba(21,36,51,.3);font-size:.7rem;
}
.mock-rozet b{display:block;font-size:1rem;letter-spacing:-.02em}
.mock-rozet span{color:var(--ink-soft)}
.mock-rozet.r-kirmizi{top:30%;left:-38px;border-left:3px solid var(--marka)}
.mock-rozet.r-kirmizi b{color:var(--marka)}
.mock-rozet.r-yesil{bottom:16%;right:-30px;border-left:3px solid var(--yesil)}
.mock-rozet.r-yesil b{color:var(--yesil)}

/* ---------- Özellik şeridi ---------- */
.ozellik-serit{
    max-width:var(--kap);margin:44px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.ozellik-serit{margin-bottom:72px}
.of{padding:26px 24px;border-right:1px solid var(--line)}
.of:last-child{border-right:0}
.of-i{width:44px;height:44px;border-radius:11px;background:rgba(21,36,51,.06);color:var(--lacivert);
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:12px}
.of h3{margin:0 0 4px;font-size:1rem;color:var(--lacivert)}
.of p{margin:0;color:var(--ink-soft);font-size:.9rem}

/* ---------- İçerik sayfaları (sayfa/blog/yazı) ---------- */
.site-sayfa{max-width:820px;margin:0 auto;padding:56px 24px 72px}
.site-sayfa h1{font-size:2.1rem;line-height:1.2;margin:0 0 .5em;color:var(--lacivert);letter-spacing:-.02em}
.site-sayfa h2{font-size:1.5rem;margin:1.6em 0 .5em;color:var(--lacivert)}
.site-sayfa h3{font-size:1.15rem;margin:1.4em 0 .4em}
.site-sayfa p{margin:0 0 1em}
.site-sayfa ul,.site-sayfa ol{margin:0 0 1em 1.2em}

/* CMS bloklar (hero/ozellikler) sayfa içinde de çalışsın */
.site-sayfa .hero,.site-sayfa .ozellikler{max-width:none;padding:0;display:block}
.site-sayfa .hero h1{font-size:2.1rem}
.ozellikler{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:32px 0}
.ozellikler .ozellik{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.ozellikler .ozellik h3{margin:0 0 .3em;font-size:1rem}
.ozellikler .ozellik p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* Fiyatlandırma tablosu (CMS içinde .fiyat-kart kullanılırsa) */
.fiyat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:28px 0}
.fiyat-kart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center}
.fiyat-kart.one-cikan{border-color:var(--marka);box-shadow:0 18px 40px -22px rgba(213,56,21,.4)}
.fiyat-kart h3{margin:0 0 6px;color:var(--lacivert)}
.fiyat-kart .tutar{font-size:1.9rem;font-weight:800;color:var(--lacivert);letter-spacing:-.02em}
.fiyat-kart .tutar span{font-size:.85rem;font-weight:500;color:var(--ink-soft)}
.fiyat-kart ul{list-style:none;padding:0;margin:16px 0;text-align:left;font-size:.9rem;color:var(--ink-soft)}
.fiyat-kart li{padding:5px 0;border-bottom:1px solid #f2f0ec}

/* ---------- Blog ---------- */
.site-yazi-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:24px}
.site-yazi-kart{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);padding-bottom:16px;background:#fff}
.site-yazi-kart:hover{border-color:var(--marka);text-decoration:none}
.site-yazi-kart img{width:100%;aspect-ratio:16/9;object-fit:cover}
.site-yazi-kart h3{margin:14px 16px 6px;font-size:1.1rem;color:var(--lacivert)}
.site-yazi-kart p{margin:0 16px;color:var(--ink-soft);font-size:.92rem}
.site-yazi-kart time{display:block;margin:10px 16px 0;color:var(--ink-soft);font-size:.82rem}
.etiket{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.78rem;color:var(--ink-soft);margin:12px 16px 0}
.site-blog-ozet{max-width:var(--kap);margin:0 auto 72px;padding:0 24px}
.site-blog-ozet h2{color:var(--lacivert)}
.site-geri{margin-bottom:8px}
.site-tarih{display:block;color:var(--ink-soft);font-size:.85rem;margin-bottom:16px}
.site-kapak{border-radius:var(--radius);margin:0 0 24px}
.site-icerik img{border-radius:var(--radius);margin:1em 0}

/* ---------- İletişim sayfası ---------- */
.site-iletisim{max-width:1000px;margin:0 auto;padding:56px 24px 72px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.si-sol h1{font-size:2rem;color:var(--lacivert);margin:0 0 .4em;letter-spacing:-.02em}
.si-sol > p{color:var(--ink-soft);margin:0 0 26px}
.si-bilgi{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.si-bilgi li{display:grid;gap:2px}
.si-e{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.si-bilgi li a,.si-bilgi li span:not(.si-e){color:var(--lacivert);font-weight:500}
.si-sosyal{display:flex;gap:16px;margin-top:22px}
.si-sag{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.si-sag .site-form{margin-top:0;max-width:none}

/* ---------- İletişim formu ---------- */
.site-form{max-width:560px;margin-top:18px;display:grid;gap:14px}
.site-form > label{display:grid;gap:5px;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.site-form input,.site-form textarea{font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-weight:400;color:var(--ink);background:#fff}
.site-form input:focus,.site-form textarea:focus{outline:2px solid var(--marka);border-color:var(--marka)}
.site-form-satir{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.site-form-hata{background:#fdecec;color:#a12626;padding:10px 12px;border-radius:8px;font-size:.9rem}
.site-bal{position:absolute;left:-9999px}
.site-onay{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;font-weight:400;color:var(--ink-soft);cursor:pointer}
.site-onay input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--marka)}
.site-onay a{font-weight:600}

/* ---------- Footer ---------- */
.site-alt{border-top:1px solid var(--line);background:#fff;padding:30px 0;color:var(--ink-soft);font-size:.9rem}
.site-alt .kap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-alt-linkler{display:flex;gap:16px;flex-wrap:wrap}
.site-alt-linkler a{color:var(--ink-soft)}
.site-odeme{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.odeme-mark{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;
    font-weight:800;font-size:.72rem;letter-spacing:.06em;color:#1a2430}
.odeme-guv{font-size:.78rem;color:var(--ink-soft)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
    .hero{grid-template-columns:1fr;gap:36px;padding-top:44px}
    .hero-h1{font-size:2.5rem}
    .hero-gorsel{max-width:640px}
    .mock-rozet.r-kirmizi{left:0}
    .mock-rozet.r-yesil{right:0}
    .ozellik-serit{grid-template-columns:1fr 1fr}
    .of:nth-child(2){border-right:0}
    .of:nth-child(1),.of:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
    .site-menu{display:none}
    .site-ust-ic{justify-content:space-between;gap:12px;height:64px}
    .site-giris-link{display:none}
    .hero-h1{font-size:2.05rem}
    .hero-btn{flex-direction:column;align-items:stretch}
    .mock{grid-template-columns:1fr}
    .mock-side{flex-direction:row;overflow:auto;gap:8px}
    .mock-nav span{display:none}
    .mock-kpi{grid-template-columns:1fr 1fr}
    .ozellik-serit{grid-template-columns:1fr}
    .of{border-right:0;border-bottom:1px solid var(--line)}
    .of:last-child{border-bottom:0}
    .site-form-satir{grid-template-columns:1fr}
    .site-iletisim{grid-template-columns:1fr;gap:28px;padding-top:40px}
}