/* =====================================================================
   site.css — Genel site stilleri
   ---------------------------------------------------------------------
   KURAL: Bu dosyada sabit (hardcoded) renk, font ailesi veya köşe
   yuvarlaklığı YOKTUR. Tüm görsel değerler --au-* CSS değişkenlerinden
   okunur; bu değişkenler aktif temaya göre PHP tarafında üretilir
   (includes/theme.php → theme_css()).

   İçindekiler
     01 Reset ve taban
     02 Tipografi ölçeği
     03 Yerleşim / container
     04 Butonlar ve rozetler
     05 Header ve gezinme
     06 Hero
     07 Müsaitlik rozeti
     08 Bölüm başlıkları
     09 Zaman çizelgesi (deneyim)
     10 Kartlar (eğitim, sertifika)
     11 Yetenek ızgarası
     12 Diller
     13 Motovlog
     14 İletişim
     15 Dijital kartvizit
     16 404
     17 Footer
     18 Logo sağ tık menüsü
     19 Fiyat listesi (/pricing)
     20 Blog
     21 Hareket / scroll-reveal
     22 Duyarlı (responsive) düzenlemeler
     23 İş takibi (/work)
   ===================================================================== */

/* =====================================================================
   01 — RESET VE TABAN
   ===================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sabit header'ın altına kayan bölüm başlıklarını kurtarır */
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--au-bg);
    color: var(--au-text);
    font-family: var(--au-font-body);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: var(--au-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Yatay taşma her koşulda engellenir */
    overflow-x: hidden;
    /* Tema geçişi yumuşak olsun (ani flash yok) */
    transition: background-color .45s ease, color .45s ease;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

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

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--au-border-soft);
    margin: 0;
}

/* Klavye erişilebilirliği — görünür odak halkası */
:focus-visible {
    outline: 2px solid var(--au-accent);
    outline-offset: 3px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--au-accent); color: var(--au-on-accent); }

/* Ekran okuyucuya özel */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* İçeriğe atlama bağlantısı */
.skip-link {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -120%);
    z-index: 200;
    padding: 12px 22px;
    background: var(--au-accent); color: var(--au-on-accent);
    border-radius: 0 0 var(--au-radius-md) var(--au-radius-md);
    font-weight: 500; text-decoration: none;
    transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* =====================================================================
   02 — TİPOGRAFİ ÖLÇEĞİ
   ===================================================================== */

:root {
    /* En küçük basamak: kategori rozeti, kart altı tarih, "önceki yazı" gibi
       ikincil etiketler. 2.8.1'e kadar TANIMSIZDI — kullanan kurallar geçersiz
       sayılıp üst öğenin (büyük) yazı boyutunu alıyordu. */
    --step--2: clamp(.6875rem, .66rem + .12vw, .75rem);
    --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
    --step-0:  clamp(.9375rem, .91rem + .16vw, 1rem);
    --step-1:  clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem);
    --step-2:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --step-3:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --step-4:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
    --step-5:  clamp(2.375rem, 1.6rem + 3.9vw, 4.25rem);

    --gap:      clamp(1rem, .8rem + 1vw, 1.5rem);
    --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
}

h1, h2, h3, h4 {
    font-family: var(--au-font-display);
    font-weight: var(--au-weight-display);
    line-height: 1.12;
    letter-spacing: var(--au-tracking);
    margin: 0 0 .4em;
    text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

.lead    { font-size: var(--step-1); color: var(--au-text-2); }
.muted   { color: var(--au-text-2); }
.subtle  { color: var(--au-text-3); }
.mono    { font-family: var(--au-font-mono); }

/* =====================================================================
   03 — YERLEŞİM / CONTAINER
   ---------------------------------------------------------------------
   ⚠️ Sitedeki TÜM bölümler (Hero dahil) aynı .container sınıfını
   kullanır. Bu, sayfa boyunca tutarlı genişlik ve sol/sağ hizalamayı
   garanti eder — hiçbir bölüm diğerinden dar/geniş olamaz.
   ===================================================================== */

.container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--au-bg-alt); }

/* Bölüm ayrımı zemin değişimiyle yapılır (--alt), ayrıca çizgiye gerek yok.
   İsteğe bağlı ince ayraç gereken yerde .section--divided kullanılır. */
.section--divided { border-top: 1px solid var(--au-border-soft); }

.grid { display: grid; gap: var(--gap); }
.cluster { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
/* Öğeleri yatayda ortalar (ör. Motovlog altındaki kanal butonu) */
.cluster--center { justify-content: center; }

/* =====================================================================
   04 — BUTONLAR VE ROZETLER
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .8em 1.5em;
    border-radius: var(--au-radius-pill);
    border: 1px solid transparent;
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--au-accent);
    color: var(--au-on-accent);
}
.btn--primary:hover { background: var(--au-accent-2); box-shadow: var(--au-shadow-md); }

.btn--ghost {
    background: transparent;
    color: var(--au-text);
    border-color: var(--au-border);
}
.btn--ghost:hover { background: var(--au-surface-2); border-color: var(--au-text-3); }

.btn--quiet {
    background: var(--au-accent-soft);
    color: var(--au-accent);
}
.btn--quiet:hover { background: var(--au-accent); color: var(--au-on-accent); }

/* YouTube butonu.
   Marka rengi temaya bağlı DEĞİLDİR (açık/koyu modda aynı kalır), bu yüzden
   tema paletinden değil kendi değişkeninden okunur — tek kaynak yine burası. */
:root { --au-youtube: #FF0033; }

.btn--youtube {
    background: var(--au-youtube);
    color: #fff;
    border-color: transparent;
}
.btn--youtube:hover {
    /* Hafifçe koyulaştır — ayrı bir renk tanımlamadan */
    background: color-mix(in srgb, var(--au-youtube) 88%, #000);
    color: #fff;
}
.btn--youtube:focus-visible { outline-color: var(--au-youtube); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .btn--youtube:hover { background: #e0002d; }
}

/* WhatsApp butonu — YouTube ile aynı mantık: marka rengi temaya bağlı
   DEĞİLDİR, açık/koyu modda aynı kalır ve kendi değişkeninden okunur. */
:root { --au-whatsapp: #25D366; }

.btn--whatsapp {
    background: var(--au-whatsapp);
    color: #fff;
    border-color: transparent;
}
.btn--whatsapp:hover {
    background: color-mix(in srgb, var(--au-whatsapp) 88%, #000);
    color: #fff;
}
.btn--whatsapp:focus-visible { outline-color: var(--au-whatsapp); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .btn--whatsapp:hover { background: #1fb655; }
}

/* Instagram — aynı mantık: marka renkleri temaya bağlı DEĞİLDİR. Gradyan
   profil halkası ve takip düğmesinde kullanılır (bkz. 24 — INSTAGRAM). */
:root {
    --au-instagram: #dd2a7b;
    --au-instagram-gradient: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
}

.btn--instagram {
    background: var(--au-instagram-gradient);
    color: #fff;
    border-color: transparent;
}
.btn--instagram:hover { color: #fff; filter: brightness(.93) saturate(1.1); }
.btn--instagram:focus-visible { outline-color: var(--au-instagram); }

/* Blog paylaş satırının diğer renkleri (bkz. 20 — BLOG → .btn--share).
   Mail / Yazdır platform değildir; birbirinden ayrışsın diye kendi renkleri var. */
:root {
    --au-facebook: #1877f2;
    --au-x:        #000000;
    --au-linkedin: #0a66c2;
    --au-mail:     #ea4335;
    --au-print:    #4b5563;
}

.btn--sm { padding: .55em 1.1em; font-size: var(--step--1); }
.btn--block { display: flex; width: 100%; }

/* İkon + kısa metin biçimindeki küçük vurgu rozetleri (chip) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .32em .8em;
    border-radius: var(--au-radius-pill);
    background: var(--au-surface-2);
    color: var(--au-text-2);
    font-size: var(--step--1);
    line-height: 1.35;
    white-space: nowrap;
}
.chip i { font-size: .92em; opacity: .8; }
.chip--accent { background: var(--au-accent-soft); color: var(--au-accent); }
.chip--accent i { opacity: 1; }

/* Uzun metinli chip'ler mobilde satır kırabilsin */
.chip--wrap { white-space: normal; }

/* =====================================================================
   05 — HEADER VE GEZİNME
   ---------------------------------------------------------------------
   ⚠️ Header'ın altında dekoratif/boş hiçbir öğe YOKTUR. Zemin ve kenarlık
   yalnızca sayfa kaydırıldığında (.is-scrolled) belirir.
   ===================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease,
                backdrop-filter .25s ease;
}
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--au-bg) 82%, transparent);
    border-bottom-color: var(--au-border-soft);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}
/* color-mix desteklemeyen tarayıcılarda düz zemin */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .site-header.is-scrolled { background: var(--au-bg); }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--au-text);
    font-family: var(--au-font-display);
    font-weight: var(--au-weight-display);
    font-size: var(--step-1);
    letter-spacing: -.03em;
    text-decoration: none;
    /* Sağ tık menüsü bu öğeye bağlanır */
    -webkit-user-select: none;
    user-select: none;
}
.site-logo:hover { text-decoration: none; opacity: .75; }
.site-logo img, .site-logo svg { height: 30px; width: auto; }
.site-logo .dot { color: var(--au-accent); }

.nav-desktop { display: flex; align-items: center; gap: .25rem; }

/* Ana sayfa bölümleri ile ayrı sayfaları ayıran dikey çizgi.
   Yalnızca görseldir; menüde bir öğe değildir (aria-hidden). */
.nav-sep {
    width: 1px;
    height: 18px;
    margin-inline: .5rem;
    background: var(--au-border);
    flex: 0 0 auto;
}
.nav-desktop a {
    padding: .5rem .8rem;
    border-radius: var(--au-radius-sm);
    color: var(--au-text-2);
    font-size: var(--step--1);
    font-weight: 450;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease;
}
.nav-desktop a:hover,
.nav-desktop a.is-active { color: var(--au-text); background: var(--au-surface-2); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: .35rem; }

/* Yuvarlak ikon butonu (tema, dil, menü) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--au-text-2);
    font-size: .95rem;
    transition: background-color .16s ease, color .16s ease;
}
.icon-btn:hover { background: var(--au-surface-2); color: var(--au-text); }

/* Dil anahtarı — iki durumlu, sade */


.nav-toggle { display: none; }

/* Mobil menü paneli */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    background: var(--au-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile ul { display: grid; gap: .25rem; text-align: center; }
.nav-mobile a {
    display: block;
    padding: .6rem 2rem;
    color: var(--au-text);
    font-family: var(--au-font-display);
    font-size: var(--step-3);
    font-weight: var(--au-weight-display);
    text-decoration: none;
}
.nav-mobile a:hover { color: var(--au-accent); text-decoration: none; }
.nav-mobile .nav-close {
    position: absolute;
    top: 15px; right: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--au-text-2);
    font-size: 1.1rem;
}
.nav-mobile .nav-close:hover { background: var(--au-surface-2); color: var(--au-text); }

body.nav-open { overflow: hidden; }

/* =====================================================================
   06 — HERO
   ===================================================================== */

.hero {
    position: relative;
    padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) clamp(3.5rem, 2.5rem + 5vw, 6rem);
    overflow: hidden;
}

/* Çok hafif bir vurgu ışıması — dekoratif, içeriğin önüne geçmez */
.hero::before {
    content: '';
    position: absolute;
    top: -30%; left: 50%;
    width: min(1100px, 130%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--au-accent-soft) 0%, transparent 62%);
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}

/* Opsiyonel arka plan deseni — yalnızca admin bir görsel yüklediyse çizilir.
   --hero-bg tanımsızken background-image: none olur, hiçbir istek yapılmaz. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: center;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}

.hero .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: var(--step--1);
    color: var(--au-text-2);
}

.hero h1 { margin-bottom: .25em; }
.hero h1 .accent { color: var(--au-accent); }

.hero-roles {
    font-size: var(--step-2);
    font-weight: 450;
    color: var(--au-text-2);
    margin-bottom: 1rem;
    min-height: 1.4em;   /* dönen metin sırasında zıplamayı önler */
}
.hero-role {
    display: inline-block;
    transition: opacity .35s ease, transform .35s ease;
}
.hero-role.is-out { opacity: 0; transform: translateY(-6px); }

.hero-slogan {
    max-width: 46ch;
    font-size: var(--step-1);
    color: var(--au-text-2);
    margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }

/* Profil fotoğrafı — yumuşak halkalı */
.hero-photo {
    position: relative;
    width: clamp(190px, 22vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--au-surface-2);
    box-shadow: var(--au-shadow-lg);
    /* Konteynerin ortasında kalsın (mobilde de) */
    margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Masaüstünde fotoğrafın ÇAPI = metin sütununun yüksekliği
   ---------------------------------------------------------------------
   İstenen hizalama: fotoğrafın üstü "müsaitlik rozeti"nin üstüyle, altı
   sosyal medya ikonlarının altıyla aynı çizgide olsun. Bu iki nokta zaten
   metin sütununun tam üstü ve tam altıdır; yani fotoğrafın çapı o sütunun
   yüksekliğine eşit olmalıdır.

   Sabit bir piksel/vw değeri verilmedi: metin sütununun yüksekliği içeriğe
   (ünvan satırı, slogan uzunluğu, buton sayısı) ve yazı tipi ölçeğine göre
   değişir; sabit değer yalnızca tek bir ekran genişliğinde tutturur.
   Bunun yerine satır yüksekliği fotoğrafa taşınır: `.hero-media` satırı
   doldurur, fotoğraf da onun yüksekliğini alır.

   ⚠️ Sütun genişliği `auto` BIRAKILAMAZ. Bırakılırsa fotoğrafın genişliği
   yüksekliğinden, yüksekliği satırdan, satır da metin sütunundan türer;
   fotoğraf büyüdükçe metin daralır, metin daraldıkça uzar ve fotoğraf daha
   da büyür — ölçüldüğünde fotoğraf 1012px'e çıkıp metni eziyordu. Sütuna
   sabit bir genişlik verilerek bu geri besleme kırılır.

   ⚠️ Eşik 821px değil 1100px. Daha dar masaüstlerinde metin sarmalayarak
   uzuyor, dolayısıyla daire de büyüyor ve sütuna sığmayıp yazının üstüne
   biniyordu (900px'te 65px taşma ölçüldü). Genişliği `max-width` ile
   kısmak da çözüm değil: yükseklik sabit kaldığı için daire ELİPSE dönüşüp
   yüzü eziyordu. Bu yüzden 1100px altında eski davranış korunur —
   sabit çaplı, dikey ortalanmış daire.
   --------------------------------------------------------------------- */
@media (min-width: 1100px) {
    .hero-grid {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 37vw, 460px);
    }
    .hero-media { position: relative; }

    /* Fotoğraf AKIŞTAN ÇIKARILIR (position: absolute). Sebebi: akışta
       kalsaydı satır yüksekliğini kendisi belirlerdi ve satır fotoğraf
       kadar uzardı — ölçüldüğünde alt kenar sosyal ikonların 37px altına
       taşıyordu. Şimdi satırın yüksekliğini yalnızca metin sütunu belirler,
       fotoğraf da o yüksekliği birebir alır. */
    .hero-photo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        width: auto;
        margin-inline: 0;

    }
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   Gündüz/gece için AYRI fotoğraf (.photo--dual)
   ---------------------------------------------------------------------
   İki görsel de basılır, üst üste durur ve mod değişince opaklıkla
   geçerler. Karar CSS'te verilir — sunucu ziyaretçinin modunu bilemez,
   JS ile değiştirmek ise geçişi gecikmeli ve titrek yapardı.

   Varsayılan gündüz fotoğrafıdır; gece fotoğrafı yalnızca ziyaretçi gece
   modunu seçtiyse (data-mode="dark") görünür. Cihazın gece-gündüz ayarı
   dikkate alınmaz (2.12.0 — bkz. theme_head_script).
   --------------------------------------------------------------------- */
.photo--dual img {
    position: absolute;
    inset: 0;
    transition: opacity .5s ease;
}
.photo--dual .photo-img--dark { opacity: 0; }

:root[data-mode="dark"]  .photo--dual .photo-img--light { opacity: 0; }
:root[data-mode="dark"]  .photo--dual .photo-img--dark  { opacity: 1; }
:root[data-mode="light"] .photo--dual .photo-img--light { opacity: 1; }
:root[data-mode="light"] .photo--dual .photo-img--dark  { opacity: 0; }

.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--au-border);
    pointer-events: none;
}
/* Fotoğraf yoksa baş harfler */
.hero-photo .initials {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    font-family: var(--au-font-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: var(--au-weight-display);
    color: var(--au-text-3);
}

/* Sosyal medya ikonları */
.socials { display: flex; flex-wrap: wrap; gap: .4rem; }
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--au-border);
    color: var(--au-text-2);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease;
}
.socials a:hover {
    background: var(--au-accent);
    border-color: var(--au-accent);
    color: var(--au-on-accent);
    transform: translateY(-2px);
    text-decoration: none;
}

/* =====================================================================
   07 — MÜSAİTLİK ROZETİ
   ---------------------------------------------------------------------
   ⚠️ Nokta ve etrafındaki nabız halkası TAM concentric olmalıdır.
   Her ikisi de aynı sarmalayıcının merkezine
   (top/left 50% + translate(-50%,-50%)) sabitlenir; halka noktanın
   etrafında simetrik olarak büyür.
   ===================================================================== */

.availability {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .38em .95em .38em .8em;
    border-radius: var(--au-radius-pill);
    background: var(--au-surface-2);
    border: 1px solid var(--au-border-soft);
    font-size: var(--step--1);
    color: var(--au-text-2);
    line-height: 1.4;
}

/* Nokta + halka için ortak sarmalayıcı — ikisi de bunun merkezine oturur */
.availability-dot {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    /* Sarmalayıcı hiçbir şey çizmez; sadece merkez referansı verir */
}
.availability-dot::before,
.availability-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--dot-color);
}
/* Sabit nokta */
.availability-dot::before {
    width: 10px;
    height: 10px;
    z-index: 1;
}
/* Nabız halkası — noktayla aynı merkez, simetrik büyür */
.availability-dot::after {
    width: 10px;
    height: 10px;
    opacity: .55;
    animation: au-pulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes au-pulse {
    0%   { width: 10px; height: 10px; opacity: .55; }
    70%  { width: 26px; height: 26px; opacity: 0; }
    100% { width: 26px; height: 26px; opacity: 0; }
}

/* Durum renkleri BURADA TANIMLANMAZ — tek kaynak includes/theme.php
   (`--au-status-*`). Yönetim panelindeki durum kartları da aynı üç
   değişkeni okur; iki taraftaki tonlar birebir aynıdır. */
.availability--available   { --dot-color: var(--au-status-available); }
.availability--limited     { --dot-color: var(--au-status-limited); }
.availability--unavailable { --dot-color: var(--au-status-busy); }

/* Meşgul/sınırlı durumda nabız atmaz — yalnızca "açığım" dikkat çeker */
.availability--unavailable .availability-dot::after { animation: none; opacity: 0; }
.availability--limited .availability-dot::after     { animation-duration: 3.2s; }

/* =====================================================================
   08 — BÖLÜM BAŞLIKLARI
   ===================================================================== */

.section-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 60ch; }

/* Başlığın üstündeki küçük mavi etiket. Başlığı TEKRAR ETMEZ: kendi kısa
   metni vardır (includes/text.php → eyebrow.*). 2.15.x'te etiketi kaldırıp
   ikonu ve rengi başlığa taşımak denendi; beğenilmedi, 2.16.0'da geri alındı. */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    color: var(--au-accent);
    font-size: var(--step--1);
    font-weight: 550;
    letter-spacing: .01em;
}
.section-eyebrow i { font-size: .95em; }

/* Sayfanın ana başlığı olan bölüm başlıkları h1'dir (iletişim, fiyat, blog) */
.section-head h1,
.section-head h2 { margin-bottom: .3em; }
.section-head p  { color: var(--au-text-2); font-size: var(--step-1); margin: 0; }

/* ---------------------------------------------------------------------
   Uzun metin blokları (Hakkımda)
   ---------------------------------------------------------------------
   ⚠️ Bu blok, sayfadaki DİĞER BÖLÜMLERLE AYNI genişliği kaplamalıdır.
   Eskiden `max-width: 68ch` vardı; container aynı olmasına rağmen içerik
   ~632px'te kesildiği için "Hakkımda dar görünüyor" hatası buradan
   kaynaklanıyordu.

   Metin TEK BİR bütün blok hâlinde akar — sütunlara bölünmez. Blok
   container'ı sonuna kadar doldurduğu için sol/sağ kenarlar diğer
   bölümlerle birebir hizalıdır.

   Hizalama: iki yana yaslı (justify), son satır sola dayalı
   ("justify last left"). `text-align-last` bunun standart karşılığıdır;
   her paragrafın yalnızca SON satırını etkiler, böylece kısa son satırlar
   sayfa genişliğine yayılıp seyrelmez.
   --------------------------------------------------------------------- */
.prose {
    font-size: var(--step-1);
    color: var(--au-text-2);
    text-align: justify;
    -moz-text-align-last: left;   /* eski Firefox */
    text-align-last: left;
}
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }

/* =====================================================================
   09 — CANLI SÜRE SAYACI
   ---------------------------------------------------------------------
   İş deneyimi zaman çizelgesi 2.7.0'da ana sayfadan kalktı (deneyimler
   yalnızca CV sayfasında, print.css ile gösterilir). Buradan yalnızca
   eğitim kartlarının da kullandığı süre etiketi kaldı (duration.js).
   ===================================================================== */

.duration-live { font-variant-numeric: tabular-nums; }

/* =====================================================================
   10 — KARTLAR (EĞİTİM, SERTİFİKA)
   ===================================================================== */

.card {
    display: flex;
    gap: 1.1rem;
    padding: clamp(1.15rem, 1rem + .6vw, 1.65rem);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    box-shadow: var(--au-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--au-shadow-md);
    border-color: var(--au-border);
}

.card-logo {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border-radius: var(--au-radius-sm);
    background: var(--au-surface-2);
    display: grid; place-items: center;
    overflow: hidden;
}
.card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.card-logo i { font-size: 1.05rem; color: var(--au-text-3); }

.card-body { min-width: 0; flex: 1; }
.card-body h3 { font-size: var(--step-1); margin-bottom: .15em; }
.card-issuer { color: var(--au-text-2); font-size: var(--step-0); margin-bottom: .6rem; }
.card-desc { color: var(--au-text-2); font-size: var(--step--1); margin-top: .7rem; }

.grid--education   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Sertifikalar (2.17.0): KARE kartlar, satırda dört (tablet 3, telefon 2).
   Sıra yukarıdan aşağı: ikon → başlık → kurum → yıl + dosya düğmesi.
   `aspect-ratio` kartı en az kare yapar; başlık uzunsa kart aşağı uzar
   (min-height: auto), içerik asla kesilmez. Aynı satırdaki kartlar grid'in
   `stretch`'iyle eşit boyda kalır; yıl ve dosya düğmesi kartın DİBİNE
   yaslanır. Eğitim kartları .card'ın yatay düzenini korur — değişiklik
   yalnızca .card--cert'tedir. */
/* ⚠️ Eşit boy iki kurala dayanır (2.17.2):
   1) `align-self: stretch` AÇIKÇA yazılır — grid'in varsayılan `normal`
      hizası, aspect-ratio taşıyan öğede `stretch` DEĞİL `start` gibi davranır;
      her kart kendi içeriği kadar uzuyor, komşusu kısa kalıyordu (telefonda).
   2) `grid-auto-rows: 1fr` tüm satırları en uzun kart kadar yapar: telefonda
      başlıklar sarınca da bütün kartlar aynı boydadır. Masaüstü/tablette
      içerik kareye sığdığı için kartlar kare kalır. */
.grid--certificates { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
/* İçerik ORTALIDIR (2.17.1): ikon, başlık, kurum ve yıl/düğme satırı kartın
   ortasında. Gövde `stretch` ile tam genişlikte kalır — uzun başlık kartın
   bütün genişliğini kullanır, yıl satırı yine dibe yaslanır. */
/* ⚠️ `width: 100%` ŞARTTIR: aspect-ratio + stretch birlikteyken genişlik
   yükseklikten türetilir — uzun başlık kartı uzatır, kart kare kalmak için
   GENİŞLER ve telefonda sütundan taşar (ölçüldü: 375px ekranda 256px kart).
   Genişlik sütuna sabitlenince oran yalnızca yüksekliği belirler: kart en az
   kare, içerik uzunsa uzar, satıra gerilir, asla genişlemez. */
.card--cert {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    aspect-ratio: 1 / 1;
    text-align: center;
}
.card--cert .card-body { display: flex; flex-direction: column; align-self: stretch; }
.card--cert .cluster { justify-content: center; }
.card--cert .card-body h3 { font-size: var(--step-0); line-height: 1.3; }
.card--cert .card-issuer { font-size: var(--step--1); }
.card--cert .cluster { margin-top: auto; }

@media (max-width: 1024px) {
    .grid--certificates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .grid--certificates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Dar telefon (≤ 480px): kartın içi ~120px'e iner ve yıl + İndir düğmeleri
   alt alta düşüyordu — satırlar eşit boy olduğu için bu TÜM kartları uzatır.
   İç boşluklar sıkılaşır, takvim ikonu gizlenir (yıl kendini anlatır).
   Ölçüldü: 360–430px'te düğmeler hiç alt alta düşmez; 390px'te kart oranı
   1.62 → 1.33. Seçici bilerek iki sınıflıdır: dosyada SONRA gelen
   `@media (max-width: 560px) { .card { gap } }` kuralını sıradan bağımsız geçer. */
@media (max-width: 480px) {
    .grid--certificates .card--cert { padding: 1rem .75rem; gap: .7rem; }
    .grid--certificates .card--cert .cluster { gap: .35rem; }
    .grid--certificates .card--cert .chip { padding-inline: .6em; gap: .35em; }
    .grid--certificates .card--cert .chip .fa-calendar { display: none; }
}

/* =====================================================================
   11 — YETENEK IZGARASI
   ===================================================================== */

/* Satır başına İKİ yetenek — Diller bölümüyle aynı ritim.
   `auto-fill` yerine sabit iki sütun: öğe sayısı değişse de düzen kaymaz. */
.grid--skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.skill:hover {
    transform: translateY(-2px);
    border-color: var(--au-accent);
    box-shadow: var(--au-shadow-sm);
}
.skill-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: var(--au-radius-sm);
    background: var(--au-accent-soft);
    color: var(--au-accent);
    display: grid; place-items: center;
    font-size: .95rem;
}
.skill-icon img { width: 22px; height: 22px; object-fit: contain; }

.skill-body { flex: 1 1 auto; min-width: 0; }

/* Ad solda, yüzde sağda — uzun adlar yüzdeyi ezmez */
.skill-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.skill-name {
    font-size: var(--step-0);
    font-weight: 500;
    min-width: 0;
    line-height: 1.35;
}
.skill-percent {
    flex: 0 0 auto;
    color: var(--au-text-3);
    font-size: var(--step--1);
    font-weight: 500;
    font-variant-numeric: tabular-nums;   /* sayarken genişlik zıplamasın */
}

/* ---------------------------------------------------------------------
   Seviye çubuğu — level = 0 ise HİÇ basılmaz (boş çubuk gösterilmez).

   Dolum, kart görünür alana girdiğinde `.is-visible` sınıfıyla tetiklenir
   (scroll-reveal gözlemcisi ekler). Genişlik `--level` özel değişkeninden
   okunur; satır içi stil yalnızca bu değeri taşır.
   --------------------------------------------------------------------- */
.skill-level {
    margin-top: .55rem;
    height: 6px;
    border-radius: 999px;
    background: var(--au-surface-2);
    overflow: hidden;
}
.skill-level > span {
    display: block;
    height: 100%;
    width: 0;                       /* başlangıç: boş */
    border-radius: inherit;
    background: linear-gradient(90deg, var(--au-accent), var(--au-accent-2));
    transition: width 1.15s cubic-bezier(.22, .75, .3, 1);
}
.skill.is-visible .skill-level > span { width: var(--level, 0%); }

/* ⚠️ JS yoksa `.is-visible` hiç eklenmez; bu kural olmadan çubuklar boş
   kalırdı. `.no-js` sınıfını site.js açılışta kaldırır. */
.no-js .skill-level > span { width: var(--level, 0%); transition: none; }

@media (prefers-reduced-motion: reduce) {
    /* Animasyon yok: çubuk doğrudan son değerinde görünür */
    .skill-level > span { transition: none; }
}

/* =====================================================================
   12 — DİLLER
   ---------------------------------------------------------------------
   ⚠️ Bayraklar emoji DEĞİL, yerel SVG dosyalarıdır (assets/img/flags/).
   Emoji bayraklar bazı Windows/Android font kombinasyonlarında "TR"/"US"
   harflerine dönüştüğü için kullanılmaz.
   ===================================================================== */

.grid--languages { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* 2.14.0'a kadar kartın sağında dekoratif bir arka plan görseli vardı
   (yüklenen "kart görseli" ya da bayrak); sahibinin isteğiyle kaldırıldı. */
.language {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
}

.language-text { min-width: 0; }

/* ---------------------------------------------------------------------
   Bayraklar — SABİT KUTU, ASLA ESNEME
   ---------------------------------------------------------------------
   Resmî bayrakların gerçek en-boy oranları birbirinden farklıdır:
   ABD 19:10, Macaristan/İrlanda/Letonya 2:1, Belçika 13:15, çoğu 3:2.
   Her biri doğal genişliğinde basıldığında (width:auto) yan yana duran
   kartlarda geniş olanlar "yatay sündürülmüş" gibi okunuyordu — oysa
   bozulma yoktu, sadece komşusundan genişlerdi.

   Çözüm: herkese aynı 3:2 kutu + `object-fit: cover`. Görsel kutuya
   ORANI KORUNARAK oturur, taşan kenar kırpılır. Hiçbir bayrak esnemez.
   `aspect-ratio` kutuyu belirlediği için `.flag--sm` yalnızca yüksekliği
   değiştirir; genişlik kendiliğinden gelir.
   --------------------------------------------------------------------- */
.flag {
    flex: 0 0 auto;
    height: 26px;
    aspect-ratio: 3 / 2;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--au-border-soft);
    object-fit: cover;
    object-position: center;
}
.flag--sm { height: 15px; border-radius: 2px; }
.language-name  { font-weight: 500; font-size: var(--step-0); }
.language-level { color: var(--au-text-3); font-size: var(--step--1); }

/* =====================================================================
   13 — MOTOVLOG
   ===================================================================== */

.grid--videos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.video-card {
    display: block;
    border-radius: var(--au-radius-lg);
    overflow: hidden;
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--au-shadow-md); text-decoration: none; }

.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--au-surface-2);
    overflow: hidden;
}
.video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.video-card:hover .video-thumb img { transform: scale(1.04); }

.video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.05rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .2s ease, transform .2s ease;
}
.video-card:hover .video-play { background: var(--au-accent); transform: translate(-50%, -50%) scale(1.06); }

/* Süre rozeti — YouTube'un kendi yerleşimine yakın, sağ altta */
.video-duration {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    letter-spacing: 0;
}

.video-body { padding: 1rem 1.15rem 1.15rem; }
.video-title {
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: .4rem;
    /* En fazla 2 satır */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-date { color: var(--au-text-3); font-size: var(--step--1); }

/* =====================================================================
   14 — İLETİŞİM
   ===================================================================== */

/* ---------------------------------------------------------------------
   İletişim düzeni — mesaj kutusu haritayla aynı yerde biter
   ---------------------------------------------------------------------
   Harita `aspect-ratio: 16/10` taşıdığı için yüksekliği sütun genişliğine
   göre DEĞİŞİR; mesaj kutusuna sabit bir piksel yüksekliği vermek yalnızca
   tek bir ekran genişliğinde tutturur. Bu yüzden hizalama layout'a
   bırakılır:

     satır 1 → [ form alanları ] [ yan sütun: iletişim + harita ]
     satır 2 → [ Gönder butonu ]

   Satır 1'in yüksekliğini yan sütun belirler (daha uzun olan odur), form
   sütunu ona uzar ve mesaj alanı (`.field--grow`) kalan boşluğu doldurur.
   Sonuç: textarea'nın alt kenarı haritanın alt kenarıyla aynı hizada olur,
   buton da altta kalır. Gönder butonu DOM'da formun dışındadır ve forma
   `form="contact-form"` ile bağlıdır (bkz. iletisim.php).
   --------------------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    /* Buton satırı için alan aralığı değil, alan boşluğu kadar ayrım yeter */
    row-gap: 1.1rem;
    align-items: start;
}

@media (min-width: 901px) {
    .contact-form-col  { grid-column: 1; grid-row: 1; align-self: stretch;
                         display: flex; flex-direction: column; }
    .contact-aside-col { grid-column: 2; grid-row: 1; align-self: start; }
    .contact-actions   { grid-column: 1; grid-row: 2; }

    /* Form, sütunun tamamını kaplar; mesaj alanı kalan boşluğu alır */
    .contact-form-col > form { flex: 1 1 auto; display: flex; flex-direction: column; }
    /* Seçici bilerek iki sınıflı: `.field { margin-bottom: 1.1rem }` bu bloktan
       SONRA tanımlı olduğu için tek sınıfla yazılsaydı onu ezemezdi.
       Alt boşluk sıfırlanır — alanı buton satırından ayıran şey `row-gap`'tir;
       bırakılsaydı kutu haritanın 1.1rem yukarısında biterdi. */
    .contact-form-col .field--grow {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    .contact-form-col .field--grow .textarea { flex: 1 1 auto; }
}

.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    margin-bottom: .45rem;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--au-text-2);
}
.field label .req { color: var(--au-danger); margin-left: .15em; }

.input, .textarea {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: var(--au-radius-md);
    border: 1px solid var(--au-border);
    background: var(--au-surface);
    color: var(--au-text);
    font-size: var(--step-0);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.input:focus, .textarea:focus {
    outline: none;
    border-color: var(--au-accent);
    box-shadow: 0 0 0 3px var(--au-accent-soft);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.input.has-error, .textarea.has-error { border-color: var(--au-danger); }
.field-error {
    display: none;
    margin-top: .4rem;
    color: var(--au-danger);
    font-size: var(--step--1);
}
.field-error.is-visible { display: block; }

/* Bal küpü (honeypot) — botlar için görünür, insanlar için gizli */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-status {
    display: none;
    align-items: flex-start;
    gap: .65rem;
    padding: .95rem 1.15rem;
    border-radius: var(--au-radius-md);
    margin-bottom: 1.25rem;
    font-size: var(--step-0);
    line-height: 1.5;
}
.form-status.is-visible { display: flex; }
.form-status--ok {
    background: color-mix(in srgb, var(--au-success) 12%, transparent);
    color: var(--au-success);
}
.form-status--err {
    background: color-mix(in srgb, var(--au-danger) 12%, transparent);
    color: var(--au-danger);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .form-status--ok  { background: var(--au-surface-2); }
    .form-status--err { background: var(--au-surface-2); }
}

/* İletişim yan sütunu */
.contact-aside { display: grid; gap: 1rem; }
.contact-line {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.1rem;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.contact-line:hover { border-color: var(--au-accent); transform: translateX(2px); text-decoration: none; }
.contact-line i { color: var(--au-accent); width: 20px; text-align: center; }
.contact-line .label { display: block; font-size: var(--step--1); color: var(--au-text-3); }
.contact-line .value { display: block; font-size: var(--step-0); word-break: break-word; }

/* Gömülü Google Maps */
.map-embed {
    margin-top: 1rem;
    border-radius: var(--au-radius-lg);
    overflow: hidden;
    border: 1px solid var(--au-border-soft);
    background: var(--au-surface-2);
    aspect-ratio: 16 / 10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =====================================================================
   15 — DİJİTAL KARTVİZİT
   ===================================================================== */

.card-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem) 0;
    background: var(--au-bg-alt);
}

.vcard {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    box-shadow: var(--au-shadow-lg);
    text-align: center;
}

.vcard-photo {
    width: 108px; height: 108px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--au-surface-2);
    box-shadow: var(--au-shadow-md);
}
.vcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.vcard-photo .initials {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    font-family: var(--au-font-display);
    font-size: 2.25rem;
    font-weight: var(--au-weight-display);
    color: var(--au-text-3);
}

.vcard h1 { font-size: var(--step-3); margin-bottom: .2em; }
.vcard .role { color: var(--au-text-2); font-size: var(--step-0); margin-bottom: 1rem; }

.vcard .availability { margin-bottom: 1.5rem; }

/* Kart eylemleri: Rehbere Ekle / Ara / WhatsApp / E-Posta.
   Hepsi alt alta ve BİREBİR AYNI ölçüdedir — her biri `btn--block` olduğu
   için genişlik kartı doldurur, hiçbirinde `btn--sm` bulunmadığı için
   yükseklikleri de eşittir.

   ⚠️ Buraya sütunlu bir düzen (grid/flex satırı) EKLEMEYİN: bu butonlar
   panelden tek tek kapatılabilir, sabit sütun sayısı olan bir satırda
   geriye kalan tek buton sola yapışık kalıyordu. */
.vcard-actions { display: grid; gap: .6rem; margin-bottom: 1.5rem; }

.vcard-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.vcard-qr {
    padding: 1rem;
    border-radius: var(--au-radius-md);
    background: #fff;   /* QR okunabilirliği için daima beyaz zemin */
    display: inline-block;
    box-shadow: var(--au-shadow-sm);
}
.vcard-qr svg { width: 148px; height: 148px; display: block; }
.vcard-note { margin-top: .85rem; color: var(--au-text-3); font-size: var(--step--1); }

.vcard-back { margin-top: 1.5rem; font-size: var(--step--1); }

/* =====================================================================
   16 — 404
   ===================================================================== */

.error-page {
    min-height: 74vh;
    display: grid;
    place-items: center;
    text-align: center;
}
.error-code {
    font-family: var(--au-font-display);
    font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
    font-weight: var(--au-weight-display);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--au-accent);
    margin-bottom: .15em;
}
.error-page h1 { font-size: var(--step-3); margin-bottom: .4em; }
.error-page p { max-width: 46ch; margin-inline: auto; color: var(--au-text-2); }
.error-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; }

/* ---- Bakım modu ekranı (includes/header.php) — 2.18.0 ----
   404 ile aynı görsel dil: logo → büyük vurgulu öğe (burada ikon) → durum
   rozeti → başlık → metin → eylem → sosyal bağlantılar. JS YOKTUR (CSP):
   ikonun ara sıra sallanması ve ilerleme çubuğu saf CSS'tir, hareket
   azaltma tercihinde durur. Renkler tema değişkenlerinden — gece modunda
   da doğru görünür. Rozet hero'daki .availability bileşenidir ("sınırlı"
   rengi ve yavaş nabız bakım durumuna uyar). */
.maint {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    text-align: center;
    background:
        radial-gradient(60rem 28rem at 50% -8%, var(--au-accent-soft), transparent 70%),
        var(--au-bg);
}
.maint-inner { display: flex; flex-direction: column; align-items: center; }
.maint-logo { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

.maint-icon {
    display: grid;
    place-items: center;
    width: clamp(5.5rem, 4.5rem + 4vw, 7.5rem);
    aspect-ratio: 1;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--au-accent-soft);
    color: var(--au-accent);
    font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
}
.maint-icon i { transform-origin: 70% 30%; animation: au-maint-tilt 3.6s ease-in-out infinite; }
@keyframes au-maint-tilt {
    0%, 62%, 100% { transform: rotate(0); }
    70% { transform: rotate(-14deg); }
    80% { transform: rotate(10deg); }
    90% { transform: rotate(-5deg); }
}

.maint .availability { margin-bottom: 1.1rem; }
.maint h1 { font-size: var(--step-4); line-height: 1.15; margin-bottom: .45em; }
.maint p  { max-width: 50ch; margin: 0 auto; color: var(--au-text-2); font-size: var(--step-1); }

/* Belirsiz ilerleme çubuğu: "çalışılıyor" hissi, yüzde vaat etmez */
.maint-progress {
    width: min(280px, 70%);
    height: 6px;
    margin-top: 2rem;
    border-radius: 999px;
    background: var(--au-surface-2);
    overflow: hidden;
}
.maint-progress span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--au-accent), var(--au-accent-2));
    animation: au-maint-bar 1.8s ease-in-out infinite;
}
@keyframes au-maint-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.maint-socials { display: flex; justify-content: center; margin-top: 1.75rem; }
.maint .maint-foot { max-width: none; margin-top: 2.5rem; color: var(--au-text-3); font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
    .maint-icon i, .maint-progress span { animation: none; }
    .maint-progress span { width: 100%; opacity: .35; }
}

/* =====================================================================
   17 — FOOTER
   ===================================================================== */

.site-footer {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
    border-top: 1px solid var(--au-border-soft);
    background: var(--au-bg);
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.footer-brand { display: grid; gap: .55rem; justify-items: start; }

/* Footer logosu header'daki ile AYNI kaynaktan gelir (logo_markup());
   burada yalnızca yüksekliği farklıdır. Logo yüklenmemişse fonksiyon
   tipografik yedeği basar — o durumda da header'daki görünüm korunsun
   diye aynı font/vurgu kuralları burada tekrarlanır. */
.footer-logo {
    display: inline-flex;
    align-items: center;
    color: var(--au-text);
    font-family: var(--au-font-display);
    font-weight: var(--au-weight-display);
    font-size: var(--step-1);
    letter-spacing: -.03em;
}
.footer-logo img, .footer-logo svg { height: 26px; width: auto; display: block; }
.footer-logo .dot { color: var(--au-accent); }
/* Footer'ın sağ sütunu: sosyal ikonlar ve altındaki sayfa bağlantıları.
   İkisi de SAĞA yaslanır — bağlantı satırı ikon sırasından kısa olduğu için
   sola yaslandığında ikonların sağ kenarıyla hizasız kalıyordu. */
.footer-links { text-align: right; }
.footer-links .socials { justify-content: flex-end; }

.footer-meta { color: var(--au-text-3); font-size: var(--step--1); }
.footer-meta a { color: var(--au-text-2); }

/* =====================================================================
   18 — LOGO SAĞ TIK MENÜSÜ
   ===================================================================== */

.ctx-menu {
    position: fixed;
    z-index: 300;
    min-width: 258px;
    padding: 6px;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid var(--au-border);
    box-shadow: var(--au-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: scale(.96);
    transform-origin: top left;
    transition: opacity .13s ease, transform .13s ease, visibility .13s ease;
}
.ctx-menu.is-open { opacity: 1; visibility: visible; transform: scale(1); }

.ctx-menu button {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .7rem;
    border-radius: var(--au-radius-sm);
    color: var(--au-text);
    font-size: var(--step--1);
    text-align: left;
    transition: background-color .12s ease, color .12s ease;
}
.ctx-menu button:hover { background: var(--au-accent); color: var(--au-on-accent); }
.ctx-menu button i { width: 16px; text-align: center; opacity: .75; }
.ctx-menu button:hover i { opacity: 1; }
.ctx-menu hr { margin: 5px 6px; }

/* Kopyalandı bildirimi */
.toast-mini {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 14px);
    z-index: 320;
    padding: .65rem 1.15rem;
    border-radius: var(--au-radius-pill);
    background: var(--au-text);
    color: var(--au-bg);
    font-size: var(--step--1);
    box-shadow: var(--au-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.toast-mini.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* =====================================================================
   19 — FİYAT LİSTESİ (/pricing)
   ---------------------------------------------------------------------
   Her kategori kendi kartıdır; kartın başlığındaki gradyan panelden
   ayarlanır ve inline style olarak gelir (bu yüzden burada renk yoktur).

   Tablo mobilde "tablo" olmaktan çıkar: hücreler blok hâline gelip
   hizmet adı ile fiyat alt alta düşer. 2 sütunlu bir fiyat tablosunu
   360px'te yatay kaydırmaya bırakmak yerine bu tercih edildi.
   ===================================================================== */

.pricing-head { padding-bottom: 0; }
/* Başlık ve giriş metni ORTALIDIR. Satır uzunluğu okunabilir kalsın diye
   blok 60ch ile sınırlı; sınırlı blok container içinde ortalanır. */
.pricing-head .section-head {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
}
.pricing-head .section-head h1 { margin-bottom: .3em; }
.pricing-head .section-head p  { color: var(--au-text-2); font-size: var(--step-1); margin: 0; }

.pricing-body { padding-top: 1.75rem; }

/* ---- Kişiye özel indirim şeridi ---- */
.pricing-banner {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--au-accent-soft);
    border-radius: var(--au-radius-md);
    background: var(--au-accent-soft);
}
.pricing-banner i { color: var(--au-accent); margin-top: .15rem; }
.pricing-banner div { display: grid; gap: .15rem; }
.pricing-banner strong { color: var(--au-text); }
.pricing-banner span   { color: var(--au-text-2); font-size: var(--step--1); }
.pricing-banner-note   { font-style: italic; }

/* ---- Arama ---- */
/* Arama kutusu altındaki kategori kartlarıyla AYNI genişliktedir: ikisi de
   aynı container'ın içinde ve genişlik sınırı yok — her ekran boyutunda
   kenarlar birebir hizalı kalır. (Önceden 420px ile sınırlıydı ve kartların
   yanında yarım kalmış gibi duruyordu.) */
.pricing-search {
    position: relative;
    margin-top: 1.75rem;
}
.pricing-search > i {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--au-text-3);
    pointer-events: none;
}
.pricing-search .input { padding-left: 2.6rem; padding-right: 2.6rem; }

/* Safari'nin kendi temizleme düğmesi gizlenir — kendi düğmemiz var */
.pricing-search input[type="search"]::-webkit-search-decoration,
.pricing-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.pricing-search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--au-text-3);
    cursor: pointer;
}
.pricing-search-clear:hover { background: var(--au-surface-2); color: var(--au-text); }

/* ---- Kategori kartı ---- */
.pricing-card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface);
    overflow: hidden;
    box-shadow: var(--au-shadow-sm);
}
.pricing-card[hidden] { display: none; }

.pricing-card-head {
    padding: .95rem 1.35rem;
    /* Gradyan hangi renk olursa olsun başlık okunur kalmalı */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.pricing-card-head h2 {
    margin: 0;
    font-size: var(--step-2);
    letter-spacing: var(--au-tracking);
}

/* ---- Tablo ---- */
.pricing-table { width: 100%; border-collapse: collapse; }

.pricing-table thead th {
    padding: .7rem 1.35rem;
    border-bottom: 1px solid var(--au-border-soft);
    background: var(--au-surface-2);
    color: var(--au-text-3);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
}
.pricing-table th.is-price,
.pricing-table td.is-price { text-align: right; white-space: nowrap; }

.pricing-table tbody tr { border-bottom: 1px solid var(--au-border-soft); }
.pricing-table tbody tr:last-child { border-bottom: 0; }
.pricing-table tbody tr[hidden] { display: none; }
.pricing-table tbody tr:hover { background: var(--au-surface-2); }

.pricing-table td { padding: .9rem 1.35rem; vertical-align: top; }

.pricing-name {
    display: block;
    color: var(--au-text);
    font-weight: 550;
}
.pricing-desc {
    display: block;
    margin-top: .3rem;
    max-width: 68ch;
    color: var(--au-text-2);
    font-size: var(--step--1);
    line-height: 1.55;
}

.pricing-now {
    display: block;
    color: var(--au-text);
    font-weight: 650;
    font-size: var(--step-1);
    font-variant-numeric: tabular-nums;
}
/* "Teklife bağlı" bir tutar değildir; rakam gibi görünmemeli */
.pricing-now.is-note {
    color: var(--au-text-2);
    font-size: var(--step--1);
    font-weight: 500;
}
.pricing-was {
    display: block;
    color: var(--au-text-3);
    font-size: var(--step--1);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* ---- Sonuç yok / boş liste ---- */
.pricing-empty {
    padding: 2rem 0;
    color: var(--au-text-2);
    text-align: center;
}

/* ---- Dipnotlar ---- */
.pricing-notes {
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    border: 1px dashed var(--au-border);
    border-radius: var(--au-radius-md);
    background: var(--au-bg-alt);
}
.pricing-notes h2 {
    margin: 0 0 .7rem;
    font-size: var(--step-0);
    color: var(--au-text);
}
/* Global sıfırlama (`ul, ol { list-style: none }`) madde işaretlerini
   kaldırdığı için burada BİLEREK geri açılıyor. Aksi hâlde maddeler
   işaretsiz kalır ve panelde metnin başına elle "—" yazma ihtiyacı doğar
   (bkz. pricing_notes(): baştaki elle konmuş işaretler zaten temizlenir). */
.pricing-notes ul {
    margin: 0;
    padding-left: 1.15rem;
    list-style: disc;
    display: grid;
    gap: .4rem;
}
.pricing-notes li { color: var(--au-text-2); font-size: var(--step--1); line-height: 1.55; }
.pricing-notes li::marker { color: var(--au-accent); }

.pricing-cta { margin-top: 2rem; text-align: center; }

@media (max-width: 640px) {
    /* Tablo düzeni bırakılır: hizmet ve fiyat alt alta okunur */
    .pricing-table thead { display: none; }
    .pricing-table tbody tr,
    .pricing-table td { display: block; }
    .pricing-table td { padding: .85rem 1.1rem; }
    .pricing-table td:first-child { padding-bottom: .35rem; }
    .pricing-table td.is-price { padding-top: 0; text-align: left; }
    .pricing-now, .pricing-was { display: inline-block; margin-right: .5rem; }
}

/* =====================================================================
   20 — BLOG
   ---------------------------------------------------------------------
   Liste (/blog) ve yazı (/blog/<slug>) sayfaları.

   Yazı gövdesindeki (.post-content) etiketler EDİTÖRDEN gelir; oradaki
   beyaz liste (blog_allowed_tags) ile buradaki stiller birbirine bağlıdır.
   Beyaz listeye yeni bir etiket eklenirse stilini de buraya yazın.
   ===================================================================== */

.container--narrow { max-width: 760px; }

/* ---- Liste başlığı ve kategori filtresi ---- */
.blog-head { padding-bottom: 0; }
.blog-head .section-head h1 { margin-bottom: .3em; }
.blog-head .section-head p  { color: var(--au-text-2); font-size: var(--step-1); margin: 0; }

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.75rem;
}

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4em .9em;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-pill);
    color: var(--au-text-2);
    font-size: var(--step--1);
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.blog-chip:hover { border-color: var(--au-text-3); color: var(--au-text); text-decoration: none; }
.blog-chip.is-active {
    background: var(--au-accent);
    border-color: var(--au-accent);
    color: var(--au-on-accent);
}
.blog-chip-count { opacity: .6; font-variant-numeric: tabular-nums; }
.blog-chip .dot-mark { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.blog-chip.is-active .dot-mark { background: var(--au-on-accent) !important; }

.blog-body { padding-top: 1.75rem; }

/* ---- Yazı kartları ---- */
/* Yatayda İKİ yazı. Kartların dar kalmaması için otomatik doldurma
   yerine sabit iki sütun kullanılır; dar ekranda tek sütuna iner. */
.grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

.post-card {
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--au-border-soft);
    box-shadow: var(--au-shadow-md);
}

.post-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.post-card-link:hover { text-decoration: none; }

.post-card-media { aspect-ratio: 16 / 9; background: var(--au-surface-2); overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { padding: 1.1rem 1.2rem 1.25rem; }
.post-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }

.post-card-body h2 {
    font-size: var(--step-1);
    line-height: 1.35;
    margin: 0 0 .5rem;
}
.post-card-body p {
    margin: 0 0 .9rem;
    color: var(--au-text-2);
    font-size: var(--step--1);
    line-height: 1.6;
}

.post-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--au-text-3);
    font-size: var(--step--2);
}

/* Kategori rozeti — rengi kategoriden gelir (--cat değişkeni) */
.post-cat {
    display: inline-flex;
    align-items: center;
    padding: .2em .7em;
    border-radius: var(--au-radius-pill);
    background: color-mix(in srgb, var(--cat, var(--au-accent)) 14%, transparent);
    color: var(--cat, var(--au-accent));
    font-size: var(--step--2);
    font-weight: 550;
    text-decoration: none;
}
.post-cat:hover { text-decoration: none; }
.post-cat--featured { --cat: var(--au-warning); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .post-cat { background: var(--au-surface-2); }
}

.blog-empty {
    padding: 3rem 0;
    color: var(--au-text-2);
    text-align: center;
}

/* ---- Sayfalama ---- */
.blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}
.blog-pager-info { color: var(--au-text-3); font-size: var(--step--1); }

/* ---- Tek yazı ---- */
.post { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
/* "İlgili yazılar" gri bölümü makalenin SONUNDA, içindedir (blog-post.php).
   Makalenin alt boşluğu gri alanın altında beyaz bir şerit bırakıyor, footer
   gri alana yapışmıyordu (2.14.7). İlgili yazı yoksa makale beyazdır ve alt
   boşluğu doğal durur — kural yalnızca bölüm varken işler. */
.post:has(> .post-related) { padding-bottom: 0; }

.post-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.5rem;
    color: var(--au-text-3);
    font-size: var(--step--1);
    text-decoration: none;
}
.post-back:hover { color: var(--au-accent); text-decoration: none; }

.post-head h1 {
    margin: .75rem 0 .6rem;
    font-size: var(--step-4);
    line-height: 1.18;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--au-text-3);
    font-size: var(--step--1);
}

.post-cover {
    margin: 2rem 0;
    border-radius: var(--au-radius-lg);
    overflow: hidden;
    background: var(--au-surface-2);
}
.post-cover img { width: 100%; height: auto; display: block; }

/* ---- Yazı gövdesi (editör çıktısı) ---- */
.post-content {
    font-size: var(--step-1);
    line-height: 1.75;
    color: var(--au-text-2);
}
.post-content > *:first-child { margin-top: 0; }

/* Dikey ritim EDİTÖRLE AYNIDIR (admin.css → `.editor-body`): yazar editörde
   ne görüyorsa yayında da onu görür. Değerler `em` cinsindendir — sitenin yazı
   boyutu editörden büyük olduğu için boşluklar da ORANLA büyür, düzen aynı kalır.
   Dikey margin'ler birleşir: başlığın üst boşluğu önceki öğenin alt boşluğundan
   büyük olduğu için başlık önceki bölümden belirgin ayrılır, altındaki metne
   yakın durur — editördeki gibi.

   ⚠️ 2.11.1–2.11.3'teki sabit "simetrik başlık boşluğu" ve başlığın komşusunun
   margin'ini sıfırlayan kurallar 2.14.2'de KALDIRILDI: editörde karşılıkları
   yoktu, kaydedilen yazı editördekinden farklı görünüyordu (başlık ayraca
   yapışıyor, ayracın üstünde büyük boşluk kalıyordu). Bir boşluğu değiştirirken
   admin.css'teki karşılığını da AYNI değerle değiştirin. */
.post-content h2,
.post-content h3,
.post-content h4 { color: var(--au-text); }
/* Başlıklar SİMETRİKTİR (2.14.6): önceki paragrafın son satırından başlığa
   ve başlıktan sonraki paragrafa kadar olan GÖRÜNÜR boşluk eşittir
   (taban çizgisi ↔ büyük harf tepesi; ölçüldü, fark < 1px). Bunun için üst
   ve alt margin EŞİT verilir: satır aralığının yarısı (half-leading) iki
   tarafta da birer kez yer aldığı için birbirini götürür.
   ⚠️ Üst margin paragrafın alt boşluğundan (1em) KÜÇÜK OLMAMALI — dikey
   margin'ler birleşir, büyük olan kazanır; küçük kalırsa üst boşluk
   paragrafınki olur ve simetri bozulur. H3'ün .9em'i mobilde de (20px ×
   .9 = 18px ≥ 17px) bu şartı sağlar. Editördeki karşılığı admin.css.
   H2'nin alt boşluğu ölçümle .04em fazladır: en büyük başlıkta font
   ölçülerinden gelen ~1–2px'lik farkı dengeler. */
.post-content h2 { margin: 1em 0 1.04em; font-size: var(--step-3); line-height: 1.25; }
.post-content h3 { margin: .9em 0; font-size: var(--step-2); line-height: 1.3; }
.post-content h4 { margin: 1em 0;  font-size: var(--step-1); line-height: 1.35; }

.post-content p { margin: 0 0 1em; }
.post-content ul, .post-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .35em; }
.post-content li::marker { color: var(--au-accent); }

.post-content a { color: var(--au-accent); text-decoration: underline; text-underline-offset: .18em; }

.post-content blockquote {
    margin: 1.2em 0;
    padding: .6em 1em;
    border-left: 3px solid var(--au-accent);
    border-radius: 0 var(--au-radius-sm) var(--au-radius-sm) 0;
    background: var(--au-bg-alt);
    color: var(--au-text-2);
    font-style: italic;
}

.post-content pre {
    margin: 1.2em 0;
    padding: .9em 1em;
    border-radius: var(--au-radius-md);
    background: var(--au-surface-2);
    font-family: var(--au-font-mono, ui-monospace, monospace);
    font-size: var(--step--1);
    line-height: 1.6;

    /* Uzun satır yatay kaydırma çubuğu üretmez, ALTA SARAR.
       `pre-wrap` girintileri ve satır sonlarını korur — kodun kendi
       biçimi bozulmadan blok kutunun içinde kalır. `anywhere` ise
       boşluksuz uzun bir dizenin (adres, karma) kutuyu taşırmasını
       engeller; `break-word` bunu tek başına yapamıyor. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.post-content code {
    padding: .12em .4em;
    border-radius: 4px;
    background: var(--au-surface-2);
    font-family: var(--au-font-mono, ui-monospace, monospace);
    font-size: .9em;
}
.post-content pre code { padding: 0; background: none; }

.post-content img {
    max-width: 100%;
    height: auto;
    margin: .4em 0;
    border-radius: var(--au-radius-md);
}
.post-content figure { margin: 1em 0; }
.post-content figcaption {
    margin-top: .5em;
    color: var(--au-text-3);
    font-size: var(--step--1);
    text-align: center;
}

/* Ayraç modelleri — editördeki "Ayraç ekle" menüsünün karşılıkları.
   Sınıf listesi includes/blog.php → blog_allowed_classes() ile birlikte
   değişir; oraya yazılmayan sınıf kaydedilirken silinir. */
.post-content hr {
    border: 0;
    border-top: 1px solid var(--au-border);
    margin: 1.6em 0;
}
.post-content hr.hr--thick { border-top-width: 3px; border-color: var(--au-text-3); }
.post-content hr.hr--short {
    width: 84px;
    margin-left: auto;
    margin-right: auto;
    border-top: 3px solid var(--au-accent);
    border-radius: 2px;
}
.post-content hr.hr--fade {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--au-border) 22%,
                                var(--au-border) 78%, transparent);
}
/* Üç nokta: çizgi yerine karakterle çizilir — yazdırmada arka planlar
   düşürüldüğü için glif her koşulda görünür. */
.post-content hr.hr--dots {
    border: 0;
    text-align: center;
}
.post-content hr.hr--dots::before {
    content: '• • •';
    display: block;
    color: var(--au-text-3);
    letter-spacing: .5em;
    font-size: .9em;
}

.post-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--step--1); }
.post-content th, .post-content td {
    padding: .6em .8em;
    border-bottom: 1px solid var(--au-border-soft);
    text-align: left;
}
.post-content th { color: var(--au-text); font-weight: 600; }

/* Hizalama sınıfları — sunucudaki beyaz listeyle AYNI adlar
   (bkz. blog_allowed_classes) */
.post-content .align-left   { text-align: left; }
.post-content .align-center { text-align: center; }
.post-content .align-right  { text-align: right; }

/* Görseller blok öğedir (sıfırlama: img { display: block }) — text-align
   onları ortalamaz, hizalama kenar boşluğuyla yapılır. Editör görseli
   paragrafın İÇİNE ekler; hizalama sınıfı da o paragraftadır.
   Editördeki karşılığı admin.css → `.editor-body .align-* img`. */
.post-content .align-center img { margin-inline: auto; }
.post-content .align-right img  { margin-inline: auto 0; }

/* ---- Gömülü içerik (YouTube, Instagram, X …) ----
   includes/embed.php üretir. Boyut satır içi değişkenlerle gelir:
   --embed-ratio (video: 16/9, Shorts 9/16) YA DA --embed-h (gönderi kartı,
   sabit başlangıç boyu — Instagram/X yüklenince post.js boyu düzeltir);
   --embed-max en fazla genişlik. */
.post-content .post-embed {
    max-width: var(--embed-max, 100%);
    margin: 1em auto;   /* editördeki kartla aynı (admin.css → .editor-body figure.embed) */
}
.post-embed iframe {
    display: block;
    width: 100%;
    height: var(--embed-h, auto);
    aspect-ratio: var(--embed-ratio, auto);
    border: 0;
    border-radius: var(--au-radius-md);
    background: var(--au-surface-2);
}
.post-embed figcaption {
    margin-top: .45em;
    text-align: center;
    font-size: var(--step--2);
}
.post-content .post-embed figcaption a { color: var(--au-text-3); text-decoration: none; }
.post-content .post-embed figcaption a:hover { color: var(--au-accent); text-decoration: underline; }

/* ---- İçindekiler (yazı başı; H2/H3'ten otomatik — includes/blog.php → blog_toc) ----
   Tıklayınca kayarak gitme html'deki scroll-behavior'dan, başlığın sabit
   header'ın altında kalmaması scroll-padding-top'tan gelir (bölüm 01).
   Okunan bölüm post.js ile .is-active olur. */
/* Üst ve alt boşluk EŞİTTİR: kutu meta satırına (yazar · tarih · okuma) ve
   yazının ilk satırına aynı uzaklıkta durur. Yazının ilk öğesinin üst boşluğu
   sıfırlandığı için (`.post-content > *:first-child`) alt boşluk tam bu
   değerdir. Kapak varsa kapağın alt boşluğuyla (2rem) birleşir, büyük olan kalır. */
.post-toc {
    margin: 2.25rem 0;
    border: 1px solid var(--au-border-soft);
    border-radius: var(--au-radius-lg);
    background: var(--au-bg-alt);
}
.post-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.2rem;
    color: var(--au-text);
    font-size: var(--step-0);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary span { display: inline-flex; align-items: center; gap: .55rem; }
.post-toc summary span i { color: var(--au-accent); }
.post-toc summary::after {
    content: '\f078';   /* chevron-down */
    font: var(--fa-font-solid);
    color: var(--au-text-3);
    font-size: .75rem;
    transition: transform .2s ease;
}
.post-toc details[open] > summary::after { transform: rotate(180deg); }
.post-toc summary:focus-visible { outline: 2px solid var(--au-accent); outline-offset: -2px; border-radius: var(--au-radius-lg); }

/* Numaralar CSS sayacıyla: 1. 2. … ve alt başlıklarda 1.1 1.2 … */
.post-toc-list,
.post-toc-list ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.post-toc-list { display: grid; gap: .1rem; padding: 0 1rem 1rem; }
.post-toc-list ol { display: grid; gap: .1rem; margin-top: .1rem; padding-left: 1.55rem; }
.post-toc-list li { counter-increment: toc; }
.post-toc-list a {
    display: flex;
    gap: .55rem;
    padding: .32rem .55rem;
    border-radius: var(--au-radius-sm);
    color: var(--au-text-2);
    font-size: var(--step--1);
    line-height: 1.45;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.post-toc-list > li > a::before { content: counter(toc) '.'; }
.post-toc-list ol a::before     { content: counters(toc, '.'); }
.post-toc-list a::before {
    flex: 0 0 auto;
    min-width: 1.4em;
    color: var(--au-text-3);
    font-variant-numeric: tabular-nums;
}
.post-toc-list a:hover { background: var(--au-surface-2); color: var(--au-text); text-decoration: none; }
.post-toc-list a.is-active { background: var(--au-accent-soft); color: var(--au-accent); }
.post-toc-list a.is-active::before { color: var(--au-accent); }

/* ---- Kaynaklar (yazı sonu; panelde boşsa basılmaz) ---- */
.post-sources {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--au-border-soft);
}
.post-sources-title {
    margin: 0 0 .7rem;
    color: var(--au-text);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0;
}
/* Genel sıfırlamada liste işareti kapalı; burada numara görünmeli */
.post-sources-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding-left: 1.4rem;
    list-style: decimal;
    color: var(--au-text-2);
    font-size: var(--step--1);
    line-height: 1.55;
}
.post-sources-list li::marker { color: var(--au-text-3); }
.post-sources-list a {
    color: var(--au-accent);
    text-decoration: underline;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
}
/* Kaynaklardan sonra gelen paylaş satırı daha yakın durur */
.post-sources + .post-share { margin-top: 1.5rem; }

/* ---- Paylaş / gezinme / ilgili yazılar ---- */

/* Paylaş satırı: sekiz EŞİT düğme. Sütunlar eşit (1fr) olduğu için düğmeler
   aynı genişlikte, aynı sınıfla (btn--quiet btn--sm) aynı yükseklikte olur.
   Sütun sayısı genişliğe göre 8 → 4 → 2 iner; en uzun ad ("WhatsApp") her
   durumda tek satırda kalır. */
.post-share {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--au-border-soft);
}
.post-share .btn { width: 100%; min-width: 0; padding-inline: .5em; }

/* İkonun OPTİK ortalaması. Düğme ikonla yazının kutularını ortalar (flex),
   ama göz kutuya değil harfe bakar: etiketler çoğunlukla küçük harf olduğu
   için yazının algılanan ortası büyük harf ortasının altındadır (Outfit:
   büyük harf .70em, x-yüksekliği .48em). Ölçüldü: ikonlar bu optik ortanın
   ~.05em, LinkedIn'in "in" çizimi ise ~.12em ÜSTÜNDE duruyordu. Değerler em —
   her ekran boyutunda aynı oranda çalışır. */
.post-share .btn > i { position: relative; top: .05em; }
.post-share .btn--share-linkedin > i { top: .12em; }

/* Her düğme kendi platformunun renginde (marka renkleri bölüm 04'te,
   temaya bağlı DEĞİL). Mail / Yazdır / Paylaş platform değildir: ayrı
   birer renk alır, Paylaş sitenin vurgu rengindedir. Hover tek kuralla
   koyulaşır (filter) — gradyanlı Instagram için de aynı çalışır. */
.btn--share {
    --share: var(--au-accent);
    background: var(--share);
    color: #fff;
    border-color: transparent;
}
.btn--share:hover { color: #fff; filter: brightness(.9) saturate(1.1); }
.btn--share:focus-visible { outline-color: var(--share); }

.btn--share-whatsapp  { --share: var(--au-whatsapp); }
/* Paylaş satırında tüm renkler düzdür (solid) — Instagram da gradyan değil */
.btn--share-instagram { --share: var(--au-instagram); }
.btn--share-facebook  { --share: var(--au-facebook); }
.btn--share-linkedin  { --share: var(--au-linkedin); }
.btn--share-mail      { --share: var(--au-mail); }
.btn--share-print     { --share: var(--au-print); }
/* X siyahtır: koyu modda zeminle karışmasın diye ince kenarlık alır */
.btn--share-x         { --share: var(--au-x); border-color: var(--au-border); }
/* Paylaş vurgu rengindedir; vurgu açık bir renk olabilir → yazı rengi temadan */
.btn--share-native    { color: var(--au-on-accent); }
.btn--share-native:hover { color: var(--au-on-accent); }

@media (max-width: 900px) {
    .post-share { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .post-share { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}
.post-nav-item {
    display: grid;
    gap: .3rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}
.post-nav-item:hover { background: var(--au-surface-2); border-color: var(--au-text-3); text-decoration: none; }
.post-nav-item span   { color: var(--au-text-3); font-size: var(--step--2); }
.post-nav-item strong { font-size: var(--step-0); line-height: 1.35; }
.post-nav-item--next  { text-align: right; }

.post-related { margin-top: 3rem; }

@media (max-width: 760px) {
    .grid--posts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .post-nav { grid-template-columns: minmax(0, 1fr); }
    .post-nav-item--next { text-align: left; }
}

/* =====================================================================
   21 — HAREKET / SCROLL-REVEAL
   ===================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* JS yoksa içerik daima görünür kalmalı */
.no-js .reveal { opacity: 1; transform: none; }

/* Hareket azaltma tercihi — tüm animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .availability-dot::after { animation: none; opacity: 0; }
}

/* =====================================================================
   22 — DUYARLI DÜZENLEMELER
   ---------------------------------------------------------------------
   Test edilen genişlikler: 360, 390, 768, 1024, 1440.
   Mobilde hero fotoğrafı ve sosyal ikonlar ORTALANIR.
   ===================================================================== */

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Başlık menüsü 1000px altında mobil menüye (☰) geçer.
   Eşik ölçümle seçildi: 2.7.0'da menü 9 bağlantıya çıktı (~746px). 840px'te
   başlık 12px taşıyor, 960px'te tam sığıyordu (logo/eylem arası 16px);
   1000px farklı logo genişliklerine pay bırakır. */
@media (max-width: 1000px) {
    .nav-desktop { display: none; }
    .nav-toggle  { display: inline-flex; }
}

@media (max-width: 820px) {
    html { scroll-padding-top: 76px; }

    /* Hero tek sütuna iner ve tamamen ortalanır */
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 2.25rem;
    }
    /* Fotoğraf metnin üstüne alınır */
    .hero-media { order: -1; }
    .hero-eyebrow,
    .hero-actions,
    .socials { justify-content: center; }
    .hero-slogan { margin-inline: auto; }
}

/* Yetenek kartları tek sütuna 640px'te düşer.
   Eşik ölçümle seçildi: kart genişliği ~278px'in altına inince program
   adları ikinci satıra sarıyor ve kart yükseklikleri bozuluyordu
   (70px / 91px karışık). 640px'te iki sütunda da tüm adlar tek satır. */
@media (max-width: 640px) {
    .grid--skills { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .card { flex-direction: column; gap: .9rem; }
    .btn { padding: .78em 1.25em; }
    /* Footer tek sütuna iner ve tamamı sola yaslanır — bu genişlikte sağ
       sütun diye bir şey kalmadığı için sağa hizalama anlamsız olurdu. */
    .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .footer-links { text-align: left; }
    .footer-links .socials { justify-content: flex-start; }
}

@media (max-width: 380px) {
    /* Kart eylemleri zaten alt alta ve tam genişlikte — ayrı kural gerekmez */
    .socials a { width: 38px; height: 38px; }
    .ctx-menu { min-width: min(258px, calc(100vw - 24px)); }
}

/* Yazdırma: site sayfaları için temel temizlik (CV sayfasının kendi
   print.css dosyası vardır) */
@media print {
    .site-header, .site-footer, .nav-mobile, .ctx-menu, .toast-mini,
    .hero-actions, .skip-link { display: none !important; }
    /* Blog yazısında "Yazdır" yalnızca yazının kendisini basar */
    .post-back, .post-share, .post-nav, .post-related { display: none !important; }
    /* Çerçeve kâğıda boş kutu olarak çıkar; altındaki "…'da aç" bağlantısı kalır */
    .post-embed iframe { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1.5rem; }
}

/* ---------------------------------------------------------------------
   Kod bloğu ve kopyalama düğmesi (assets/js/post.js üretir)
   --------------------------------------------------------------------- */
.code-block { position: relative; }

.code-copy {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    background: var(--au-surface);
    color: var(--au-text-3);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    /* Kodun üstünü kapatmasın: fare bloğa girene kadar soluk durur */
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.code-block:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--au-accent); border-color: var(--au-accent); }
.code-copy.is-done { color: var(--au-success); border-color: var(--au-success); }

/* Dokunmatikte hover yoktur; düğme her zaman görünür olmalıdır. */
@media (hover: none) {
    .code-copy { opacity: 1; }
}

/* Kopyala düğmesinin altına kod girmesin.
   Sağa sabit padding vermek, satırlar SARDIĞI için her satırı
   kısaltırdı; oysa düğme yalnız ilk satırların hizasında duruyor.
   Sağa yaslanmış boş bir kutu, sadece kendi hizasındaki satırları
   kısaltır — altındaki satırlar tam genişlikte akar. */
.code-block pre::before {
    content: '';
    float: right;
    width: 7rem;
    height: 1.9rem;
}

/* =====================================================================
   23 — İŞ TAKİBİ (/work)
   ---------------------------------------------------------------------
   Özel sayfa (bkz. work.php). Durum renkleri müsaitlik rozetiyle AYNI üç
   tema değişkeninden gelir — ayrıca renk tanımlanmaz:
     yeşil  (--au-status-available)  yapıldı; hafif parlama ile ayrışır
     sarı   (--au-status-limited)    bugün henüz dokunulmadı
   Kırmızı (gün bitti, yapılmadı) yalnızca panel raporlarında görünür.
   ===================================================================== */

.work-wrap { max-width: 860px; }

/* ---- Başlık ve günün ilerlemesi ---- */
.work-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.work-head h1 { margin: 0 0 .15em; }
.work-date { margin: 0; color: var(--au-text-2); font-size: var(--step-1); }

.work-progress { flex: 0 1 290px; min-width: 230px; }
.work-progress-count {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-bottom: .55rem;
    color: var(--au-text-2);
}
.work-progress-count strong {
    color: var(--au-text);
    font-size: var(--step-3);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.work-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--au-surface-2);
    overflow: hidden;
}
.work-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--au-status-available);
    transition: width .35s ease;
}
.work-save {
    min-height: 1.4em;
    margin: .55rem 0 0;
    color: var(--au-text-3);
    font-size: var(--step--1);
}
.work-save[data-state="saved"] { color: var(--au-status-available); }
.work-save[data-state="error"] { color: var(--au-status-busy); }

/* ---- Bloklar ---- */
.work-block { margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }
.work-block:last-child { margin-bottom: 0; }
.work-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.work-block-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: var(--step-1);
}
.work-block-head .work-block-title { margin: 0; }
.work-block-title i { color: var(--au-accent); font-size: .85em; }
.work-block-sub { margin: -.5rem 0 1rem; color: var(--au-text-3); font-size: var(--step--1); }
.work-empty { margin: .85rem 0 0; color: var(--au-text-3); font-size: var(--step--1); }

/* ---- Durum rengi: kart, iş ve kutucuk aynı değişkeni okur ---- */
.work-item,
.work-todo { --state: var(--au-status-limited); }
.work-item.is-done,
.work-todo.is-done { --state: var(--au-status-available); }

/* ---- Görev kartı ---- */
.work-list { display: grid; gap: .8rem; }

.work-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid color-mix(in srgb, var(--state) 40%, var(--au-border-soft));
    transition: border-color .25s ease, box-shadow .25s ease;
}
.work-item.is-done,
.work-todo.is-done {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--state) 30%, transparent),
        0 0 24px -6px color-mix(in srgb, var(--state) 60%, transparent);
}
.work-item--text { align-items: flex-start; }

.work-state {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--state);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--state) 20%, transparent);
    transition: background .25s ease, box-shadow .25s ease;
}
.work-item--text .work-state { margin-top: .4rem; }

.work-item-main { flex: 1 1 auto; min-width: 0; }
.work-item-title {
    margin: 0;
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.work-item-title strong { font-weight: 700; }
.work-item-sub { margin: .15rem 0 0; color: var(--au-text-3); font-size: var(--step--1); }

.work-text {
    margin-top: .8rem;
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.55;
}

/* ---- Sayaç: − [ sayı ] + ---- */
.work-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-md);
    background: var(--au-surface-2);
    overflow: hidden;
}
.work-step {
    width: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--au-accent);
    cursor: pointer;
    transition: background .15s ease;
}
.work-step:hover { background: var(--au-accent-soft); }
.work-step:focus-visible { outline: 2px solid var(--au-accent); outline-offset: -2px; }

.work-count {
    width: 3.4rem;
    padding: .6rem 0;
    border: 0;
    border-inline: 1px solid var(--au-border);
    background: var(--au-surface);
    color: var(--au-text);
    font: inherit;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.work-count::-webkit-outer-spin-button,
.work-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.work-count:focus { outline: none; box-shadow: inset 0 0 0 2px var(--au-accent); }

/* ---- Tek seferlik işler ---- */
.work-add { display: flex; gap: .6rem; margin-bottom: 1rem; }
.work-add .input { flex: 1 1 auto; min-width: 0; }
.work-add .btn { flex: 0 0 auto; }

.work-todos,
.work-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.work-todo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem .7rem 1rem;
    border-radius: var(--au-radius-md);
    background: var(--au-surface);
    border: 1px solid color-mix(in srgb, var(--state) 40%, var(--au-border-soft));
    transition: border-color .25s ease, box-shadow .25s ease;
}
.work-todo-check {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}
/* Gerçek kutu görünmez ama klavye ve ekran okuyucu için yerinde durur */
.work-todo-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.work-todo-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--state);
    border-radius: 6px;
    transition: background .2s ease;
}
.work-todo-box i {
    color: var(--au-surface);
    font-size: .7rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.work-todo.is-done .work-todo-box { background: var(--state); }
.work-todo.is-done .work-todo-box i { opacity: 1; transform: none; }
.work-todo-check input:focus-visible + .work-todo-box { outline: 2px solid var(--au-accent); outline-offset: 2px; }

.work-todo-title { overflow-wrap: anywhere; }
.work-todo.is-done .work-todo-title {
    color: var(--au-text-2);
    text-decoration: line-through;
    text-decoration-color: var(--au-text-3);
}
.work-todo-age {
    flex: 0 0 auto;
    color: var(--au-text-3);
    font-size: var(--step--1);
    white-space: nowrap;
}

.work-icon-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--au-radius-sm);
    background: transparent;
    color: var(--au-text-3);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.work-icon-btn:hover {
    color: var(--au-status-busy);
    background: color-mix(in srgb, var(--au-status-busy) 12%, transparent);
}

/* ---- Notlar: numara CSS sayacıyla — silince yeniden sıralanır ---- */
.work-notes { counter-reset: work-note; }
.work-note {
    counter-increment: work-note;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.work-note::before {
    content: counter(work-note);
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--au-radius-sm);
    background: var(--au-accent-soft);
    color: var(--au-accent);
    font-size: var(--step--1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.work-note .input { flex: 1 1 auto; min-width: 0; }

/* color-mix desteklenmiyorsa kenar ve parlama sade hâle düşer */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .work-item, .work-todo { border-color: var(--state); }
    .work-item.is-done, .work-todo.is-done { box-shadow: 0 0 0 1px var(--state); }
    .work-state { box-shadow: none; }
}

@media (max-width: 560px) {
    .work-progress { flex-basis: 100%; }
    .work-item { gap: .8rem; padding: .9rem; }

    /* Sayaç kartı: sayaç yanında dar kalan sütunda uzun hesap adları
       ("@saglikcibilgilendirme") kelime ortasından kırılıyordu. Dar ekranda
       sayaç ikinci satıra iner, başlık tam genişliği kullanır; sayaç başlığın
       hizasında (durum noktasının sağında) başlar. */
    .work-item--counter { flex-wrap: wrap; row-gap: .75rem; }
    .work-item--counter .work-item-main { flex-basis: calc(100% - 12px - .8rem); }
    .work-item--counter .work-stepper { margin-left: calc(12px + .8rem); }
    .work-step { width: 2.3rem; }
    .work-count { width: 3rem; }

    /* Dar ekranda "3 gündür bekliyor" ikinci satıra iner, başlığın altına hizalanır */
    .work-todo { flex-wrap: wrap; row-gap: .15rem; }
    .work-todo-age { order: 3; flex-basis: 100%; padding-left: calc(22px + .75rem); }
    .work-todo .work-icon-btn { order: 2; }
}

/* ---- Evet / Hayır görevi: tek tıkla işaretlenen hap düğme ---- */
.work-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.05rem;
    border: 1px solid var(--au-border);
    border-radius: 999px;
    background: var(--au-surface-2);
    color: var(--au-text-2);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.work-check i { opacity: .45; transition: opacity .2s ease; }
.work-check:hover { border-color: var(--au-status-available); color: var(--au-text); }
.work-check[aria-pressed="true"] {
    background: var(--au-status-available);
    border-color: var(--au-status-available);
    color: var(--au-surface);
}
.work-check[aria-pressed="true"] i { opacity: 1; }
.work-check:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 2px; }

/* ---- Günlük hedef rozeti ("Hedef 2") ---- */
.work-target {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .35rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--au-surface-2);
    color: var(--au-text-2);
    font-size: .85em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.work-item.is-done .work-target {
    background: color-mix(in srgb, var(--state) 16%, transparent);
    color: var(--state);
}

/* ---- Seri ("5 gün seri") ---- */
.work-streak {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--au-status-limited) 14%, transparent);
    color: var(--au-status-limited);
    font-size: var(--step--1);
    font-weight: 600;
}

@media (max-width: 560px) {
    /* Evet/Hayır düğmesi de sayaç gibi başlığın altına iner */
    .work-item--check { flex-wrap: wrap; row-gap: .75rem; }
    .work-item--check .work-item-main { flex-basis: calc(100% - 12px - .8rem); }
    .work-item--check .work-check { margin-left: calc(12px + .8rem); }
}

/* =====================================================================
   24 — INSTAGRAM (ana sayfa)
   ---------------------------------------------------------------------
   Her hesap bir kart: profil → açıklama → takip düğmesi. İçerik
   tamamen panelden gelir (token/API 2.13.0'da kalktı). Kart zemini --au-surface olduğu için bölüm gri de beyaz
   da gelse (bkz. index.php → $band) aynı görünür. Marka renkleri
   bölüm 04'teki --au-instagram değişkenlerinden okunur.
   ===================================================================== */

.grid--instagram { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.ig-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
    padding: clamp(1.15rem, 1rem + .6vw, 1.65rem);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface);
    border: 1px solid var(--au-border-soft);
    box-shadow: var(--au-shadow-sm);
}

/* ---- Profil satırı ---- */
.ig-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

/* Instagram hikâye halkası: gradyan çerçeve + kart zemini renginde boşluk */
.ig-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 3px;
    border-radius: 50%;
    background: var(--au-instagram-gradient);
}
.ig-avatar img,
.ig-avatar-fallback {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--au-surface);
    background: var(--au-surface-2);
    object-fit: cover;
}
.ig-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--au-text-2);
    font-size: 1.45rem;
}

.ig-id { flex: 1 1 0; min-width: 0; display: grid; gap: .1rem; }
.ig-handle {
    color: var(--au-text);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ig-handle:hover { color: var(--au-instagram); text-decoration: none; }
.ig-label { flex: 0 0 auto; }

.ig-desc { margin: 0; color: var(--au-text-2); font-size: var(--step-0); }

/* Düğme kartın dibine yaslanır: yan yana kartlarda aynı hizada durur */
.ig-follow { margin-top: auto; }