/* =========================================================
   Semih Bayraktar — marka katmanı
   Şablonun styles.css dosyasının ÜZERİNE yüklenir; şablon
   dosyalarına dokunmadan renkleri ve yeni bileşenleri ekler.
   ========================================================= */

:root {
    --sb-bg: #0E1117;          /* antrasit-lacivert zemin */
    --sb-surface: #151A23;     /* kart yüzeyi */
    --sb-navy: #1C2A44;        /* lacivert */
    --sb-accent: #8FA8D8;      /* açık lacivert vurgu (koyu zeminde okunur) */
    --sb-text: #F2F4F7;
    --sb-muted: rgba(242, 244, 247, .64);
    --sb-line: rgba(242, 244, 247, .12);
    --sb-error: #E7A0A0;

    /* Şablon değişken kullanıyorsa yeşil vurguyu bastırır */
    --primary: var(--sb-accent);
    --bs-primary: var(--sb-accent);
}

body { background-color: var(--sb-bg); color: var(--sb-text); }

/* ---------- Vurgu rengi: şablonun yeşili yerine lacivert ---------- */
.text-primary { color: var(--sb-accent) !important; }
.bg-primary,
.br-dot { background-color: var(--sb-accent) !important; }
::selection { background: var(--sb-accent); color: var(--sb-bg); }

/* ---------- Erişilebilirlik ---------- */
.sb-skip {
    position: absolute; left: 16px; top: -60px; z-index: 9999;
    padding: 10px 16px; background: var(--sb-text); color: var(--sb-bg);
    transition: top .2s;
}
.sb-skip:focus { top: 16px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--sb-accent); outline-offset: 3px;
}
button.btn-nav-swiper { background: none; border: 0; color: inherit; padding: 0; }
@media (prefers-reduced-motion: reduce) {
    .cursor-trail { display: none !important; }
    *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ---------- Logo / monogram ---------- */
.sb-mono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--sb-line);
    font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--sb-text);
    transition: border-color .3s, color .3s;
}
.sb-logo:hover .sb-mono { border-color: var(--sb-accent); color: var(--sb-accent); }
.sb-mono--lg { width: 40px; height: 48px; border: 0; font-size: 22px; color: var(--sb-accent); }

/* ---------- Dil seçici ---------- */
.sb-lang { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-lang a { color: var(--sb-muted); transition: color .2s; }
.sb-lang a:hover, .sb-lang a[aria-current="true"] { color: var(--sb-text); }
.sb-lang a[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }
.canvas_foot .sb-lang { margin-bottom: 8px; }

/* ---------- Hero ---------- */
.davies-large.sb-name,
.davies-large.sb-name > div {
    font-size: clamp(48px, 9.5vw, 168px);
    line-height: .92;
    letter-spacing: -0.04em;
}
.sb-hero-title {
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.25; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 16px; color: var(--sb-text);
}
.sb-btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- Görsel yer tutucu panel (stok fotoğraf yerine) ---------- */
.sb-visual {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    width: 100%; aspect-ratio: 16 / 10; padding: clamp(20px, 3vw, 40px);
    background-color: var(--sb-surface);
    background-image:
        linear-gradient(var(--sb-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--sb-line) 1px, transparent 1px);
    background-size: 64px 64px;
    border: 1px solid var(--sb-line);
}
.sb-visual--tall { aspect-ratio: 4 / 5; }
.sb-visual--card { aspect-ratio: 4 / 3; }
.sb-visual__num { font-size: 13px; letter-spacing: .14em; color: var(--sb-accent); }
.sb-visual__label {
    font-size: clamp(36px, 6vw, 88px); font-weight: 600;
    letter-spacing: -0.04em; line-height: 1; color: var(--sb-text);
}
.sb-visual--card .sb-visual__label,
.sb-visual--tall .sb-visual__label { font-size: clamp(30px, 3.6vw, 52px); }
.sb-visual__text { max-width: 420px; color: var(--sb-muted); margin: 0; }

/* ---------- Hakkımda ---------- */
.sb-portrait {
    position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--sb-navy), var(--sb-surface));
    border: 1px solid var(--sb-line);
}
.sb-portrait picture { display: block; width: 100%; height: 100%; }
.sb-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sb-portrait--photo { overflow: hidden; background: var(--sb-surface); }
/* Fotoğrafı koyu temaya oturtan çok hafif alt gölge + ince çerçeve */
.sb-portrait--photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 70%, rgba(14, 17, 23, .45));
    box-shadow: inset 0 0 0 1px var(--sb-line);
}
.sb-portrait__mono {
    font-size: clamp(80px, 12vw, 160px); font-weight: 600;
    letter-spacing: -0.04em; color: rgba(242, 244, 247, .14);
}
.sb-signature { font-style: italic; font-size: 20px; color: var(--sb-muted); margin-top: 16px; }
.sb-prose { margin-top: 24px; }
.sb-prose p { color: var(--sb-muted); line-height: 1.7; margin-bottom: 16px; }
.experience-list .exp_year { color: var(--sb-muted); text-align: right; }

/* ---------- Ortak metin parçaları ---------- */
.sb-lead { color: var(--sb-muted); max-width: 620px; margin: 0 auto 32px; line-height: 1.6; }
.sb-lead--side { margin: 0; max-width: 420px; }
.sb-mt { margin-top: 40px; }

/* ---------- Proje kartları ---------- */
.wg-feature-v01 .feature-image.sb-visual { display: flex; }
.sb-status {
    flex-shrink: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 10px; border: 1px solid var(--sb-line); color: var(--sb-accent);
}
.sb-card-desc { color: var(--sb-muted); margin: 12px 0 8px; line-height: 1.6; }
.sb-tools { font-size: 13px; letter-spacing: .04em; color: var(--sb-muted); opacity: .8; margin: 0; }

/* ---------- Yazılar (boş durum) ---------- */
.sb-empty { border-top: 1px solid var(--sb-line); padding-top: 32px; max-width: 760px; }
.sb-empty p { color: var(--sb-muted); line-height: 1.7; margin: 24px 0; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sb-chips li { padding: 6px 12px; border: 1px solid var(--sb-line); font-size: 13px; color: var(--sb-muted); }

/* ---------- İletişim formu ---------- */
.sb-textarea { resize: vertical; min-height: 120px; }
.sb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tf-input[aria-invalid="true"] { border-color: var(--sb-error) !important; }
.sb-form-status { margin: 16px 0 0; min-height: 1.5em; }
.sb-form-status.is-error { color: var(--sb-error); }
.sb-form-status.is-success { color: var(--sb-accent); }
.sb-contact-form button[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Footer ---------- */
.sb-footer-wordmark {
    font-size: clamp(36px, 9vw, 150px); font-weight: 600; line-height: 1;
    letter-spacing: -0.05em; color: rgba(242, 244, 247, .08);
    margin: 0 0 24px; text-align: center; overflow-wrap: anywhere;
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
    .sb-visual { aspect-ratio: 4 / 3; background-size: 40px 40px; }
    .sb-btn-group .tf-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
    .sb-lead--side { margin-top: 12px; }
    .s-header { flex-wrap: wrap; }
}