/* =====================================================
   Barkosis — tek sayfalık kurumsal site
   Tasarım: modern kurumsal (2026-08-28'de kullanıcının
   açık isteğiyle "2010'lar panel/kutu" görünümünden
   buraya geçildi). Tam genişlikte bölümler, iri
   tipografi, ferah boşluklar, yumuşak gölgeli kartlar.
   Serbest: yumuşak gradyanlar ve 0.15 sn'lik renk
   geçişleri. Yasak olmaya devam ediyor: JavaScript
   (sitede hiç çalışmaz), hareket/kayma animasyonları
   ve web fontu (sistem fontları kullanılır).
   ===================================================== */

:root {
    --brand: #1f5fbf;
    --brand-dark: #17498f;
    --brand-soluk: #eaf1fc;
    --ink: #16213a;
    --metin: #47526b;
    --soluk: #7b8699;
    --cizgi: #e3e8f0;
    --zemin: #f5f7fb;
    --anydesk: #d63c3c;
    --anydesk-dark: #b02f2f;
    --golge: 0 1px 2px rgba(22, 33, 58, .06), 0 8px 24px rgba(22, 33, 58, .07);
    --golge-yumusak: 0 1px 2px rgba(22, 33, 58, .05), 0 4px 12px rgba(22, 33, 58, .05);
    --gecis: .15s ease;
    --yuvarlak: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--metin);
    -webkit-text-size-adjust: 100%;
}

img { border: 0; max-width: 100%; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 16px; }

.b-skip { position: absolute; left: -9999px; }
.b-skip:focus {
    left: 16px; top: 16px; z-index: 100;
    background: #ffffff; padding: 10px 16px;
    border: 2px solid var(--brand); border-radius: 8px;
}

/* Ortak iç genişlik: bölümler tam genişlikte, içerik hizalı. */
.b-wrap {
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- üst bilgi ---------- */
/* position: sticky saf CSS'tir, JavaScript gerektirmez. */
.b-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cizgi);
}
.b-header-in {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 76px;
}
.b-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.b-logo:hover { text-decoration: none; }
.b-logo img { display: block; width: 112px; height: auto; }

.b-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    font-size: 15px;
}
.b-nav a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink);
    font-weight: 500;
    transition: background-color var(--gecis), color var(--gecis);
}
.b-nav a:hover {
    background: var(--brand-soluk);
    color: var(--brand-dark);
    text-decoration: none;
}

.b-tel {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--gecis);
}
.b-tel:hover { background: var(--brand-dark); color: #ffffff; text-decoration: none; }

/* ---------- giriş bölümü ---------- */
.b-hero {
    background: linear-gradient(180deg, #f2f6fd 0%, #ffffff 100%);
    border-bottom: 1px solid var(--cizgi);
    padding: 76px 0 84px;
}
.b-hero-in {
    display: flex;
    align-items: center;
    gap: 64px;
}
.b-hero-text { flex: 1 1 auto; min-width: 0; }

h1 {
    margin: 0 0 20px;
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--ink);
}
.b-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--metin);
    max-width: 34em;
}

.b-hero-img {
    flex: 0 0 auto;
    width: 300px;
}
.b-hero-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
}

/* ---------- listeler ---------- */
.b-list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.b-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}
/* Onay işareti saf CSS ile çizilir: ikon dosyası/yazı tipi gerekmez. */
.b-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .52em;
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--brand);
    border-bottom: 2.5px solid var(--brand);
    transform: rotate(-45deg);
}

/* ---------- butonlar ---------- */
.b-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}
.b-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 10px;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}
.b-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #ffffff;
    text-decoration: none;
}
.b-btn--ghost {
    background: #ffffff;
    border-color: var(--cizgi);
    color: var(--ink);
}
.b-btn--ghost:hover {
    background: var(--brand-soluk);
    border-color: var(--brand-soluk);
    color: var(--brand-dark);
}
.b-btn--anydesk { background: var(--anydesk); border-color: var(--anydesk); }
.b-btn--anydesk:hover { background: var(--anydesk-dark); border-color: var(--anydesk-dark); }

/* ---------- bölümler ---------- */
.b-section {
    padding: 80px 0;
    /* Yapışkan başlık, bağlantıyla gelinen bölümün üstünü örtmesin. */
    scroll-margin-top: 76px;
}
.b-section--alt {
    background: var(--zemin);
    border-top: 1px solid var(--cizgi);
    border-bottom: 1px solid var(--cizgi);
}
.b-h2 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--ink);
}
.b-sub {
    font-size: 18px;
    color: var(--soluk);
    max-width: 46em;
    margin-bottom: 40px;
}

/* ---------- destek kartları ---------- */
.b-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.b-card {
    background: #ffffff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yumusak);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.b-card h3 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
}
.b-card p { margin-bottom: 24px; }
.b-card .b-btn { margin-top: auto; align-self: flex-start; }

/* ---------- iletişim ---------- */
.b-contact {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}
.b-bilgi {
    background: #ffffff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yumusak);
    padding: 28px 32px;
}
.b-bilgi + .b-bilgi { margin-top: 24px; }
.b-bilgi h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--soluk);
}
.b-bilgi p { margin: 0; color: var(--ink); }
.b-bilgi a {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    transition: color var(--gecis);
}
.b-bilgi a:hover { color: var(--brand); text-decoration: none; }

.b-map {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yumusak);
    overflow: hidden;
    background: #ffffff;
}
.b-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ---------- alt bilgi ---------- */
.b-footer {
    background: var(--ink);
    color: #98a3ba;
    padding: 48px 0;
    text-align: center;
}
.b-footer img {
    display: block;
    width: 128px;
    height: auto;
    margin: 0 auto 14px;
    opacity: .9;
}
.b-footer p { margin: 0; font-size: 15px; }

/* ---------- hata sayfası ---------- */
.b-error { padding: 100px 0; text-align: center; }
.b-error .b-actions { justify-content: center; }

/* ---------- geniş tablet ---------- */
@media (max-width: 960px) {
    .b-hero { padding: 56px 0 60px; }
    .b-hero-in { gap: 40px; }
    h1 { font-size: 38px; }
    .b-hero-img { width: 240px; }
    .b-section { padding: 60px 0; }
    .b-contact { grid-template-columns: 1fr; }
    .b-map iframe { height: 340px; }
}

/* ---------- mobil ---------- */
@media (max-width: 720px) {
    body { font-size: 16px; }
    .b-wrap { padding: 0 18px; }

    /* Başlık iki satıra düşer; yapışkanlık kapatılır ki küçük ekranda yer kaplamasın. */
    .b-header { position: static; }
    .b-header-in {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding-top: 14px;
        padding-bottom: 14px;
        min-height: 0;
    }
    .b-logo img { width: 100px; }
    .b-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        gap: 2px;
        font-size: 14px;
    }
    .b-nav a { padding: 8px 10px; }
    .b-tel { margin-left: auto; padding: 8px 14px; font-size: 14px; }

    .b-hero { padding: 40px 0 48px; }
    .b-hero-in { flex-direction: column-reverse; align-items: stretch; gap: 28px; }
    .b-hero-img { width: 200px; align-self: center; }
    h1 { font-size: 30px; }
    .b-lead { font-size: 17px; }

    .b-section { padding: 48px 0; scroll-margin-top: 0; }
    .b-h2 { font-size: 26px; }
    .b-sub { font-size: 16px; margin-bottom: 28px; }

    .b-cards { grid-template-columns: 1fr; gap: 16px; }
    .b-card { padding: 24px; }
    .b-bilgi { padding: 22px 24px; }
    .b-bilgi + .b-bilgi { margin-top: 16px; }
    .b-actions .b-btn { flex: 1 1 auto; }
    .b-map iframe { height: 280px; }
    .b-footer { padding: 36px 0; }
}