/* ═══════════════════════════════════════════════════════════
   ICONACODEX — CINEMATIC LAYER
   app.css üzerine modüler sinematik + ikon-merkezli katman.
   Madalyon sistemi · vignette · imleç ışığı · çağ atmosferi ·
   takımyıldız hero · galeri · sayaç · profil yükseltmeleri
═══════════════════════════════════════════════════════════ */

/* ─── SİNEMATİK ATMOSFER (vignette + imleç ışığı) ─────────── */
.ic-vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, rgba(0,0,0,.55) 100%);
    mix-blend-mode: multiply;
}
[data-theme="light"] .ic-vignette { background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 60%, rgba(60,40,10,.12) 100%); }

/* imleci takip eden yumuşak altın ışık */
.ic-cursor-glow {
    position: fixed; top: 0; left: 0; width: 480px; height: 480px;
    margin: -240px 0 0 -240px; border-radius: 50%; pointer-events: none; z-index: 2;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
    opacity: 0; transition: opacity .6s ease; will-change: transform;
    mix-blend-mode: screen;
}
.ic-cursor-glow.on { opacity: .5; }
@media (hover: none) { .ic-cursor-glow { display: none; } }

/* içeriği vignette üstüne taşı */
main, .ic-navbar, .filter-bar, .ic-footer { position: relative; z-index: 3; }

/* ─── MADALYON — sitenin görsel çekirdeği ────────────────── */
.ic-med {
    --med-size: 64px; --med-color: var(--accent);
    position: relative; width: var(--med-size); height: var(--med-size);
    border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center;
    background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--surface-solid));
    box-shadow: inset 0 0 0 1px var(--border-bright), 0 4px 14px rgba(0,0,0,.45);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.ic-med::before { /* altın halka */
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 210deg, transparent, var(--med-color), transparent 60%);
    opacity: .0; transition: opacity .35s; -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
}
.ic-med img { width: 78%; height: 78%; border-radius: 50%; object-fit: cover; }
.ic-med .ic-med-fallback {
    font-family: 'Playfair Display', serif; font-weight: 800;
    font-size: calc(var(--med-size) * .42); color: var(--med-color); line-height: 1;
}
.ic-med:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: inset 0 0 0 1px var(--med-color), 0 0 26px var(--accent-glow), 0 10px 24px rgba(0,0,0,.5);
}
.ic-med:hover::before { opacity: .9; animation: ic-ring-spin 3.5s linear infinite; }
@keyframes ic-ring-spin { to { transform: rotate(360deg); } }
.ic-med-sm { --med-size: 40px; }
.ic-med-lg { --med-size: 104px; }
.ic-med-xl { --med-size: 148px; }

/* tip renkleri (graph paletiyle uyumlu) */
.ic-med[data-tip="medeniyet"] { --med-color:#5ec4c4; }
.ic-med[data-tip="devlet"]    { --med-color:#e07b5a; }
.ic-med[data-tip="din"]       { --med-color:#b07fc4; }
.ic-med[data-tip="kitap"]     { --med-color:#6db87a; }
.ic-med[data-tip="yazar"]     { --med-color:#6fa3d4; }
.ic-med[data-tip="olay"]      { --med-color:#d4a853; }
.ic-med[data-tip="cag"]       { --med-color:#c9a96a; }

/* ─── ENTITY GALERİSİ ────────────────────────────────────── */
.ic-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.1rem; padding: 1.5rem 0 3rem;
}
.ic-gallery-card {
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    padding: 1.4rem 1rem 1.2rem; text-align: center; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s, background .3s;
    position: relative; overflow: hidden;
}
.ic-gallery-card::after {
    content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-light), transparent 70%);
}
.ic-gallery-card:hover {
    transform: translateY(-6px); border-color: var(--border-bright);
    box-shadow: var(--shadow-md), var(--shadow-glow); text-decoration: none;
}
.ic-gallery-card:hover::after { opacity: 1; }
.ic-gallery-card .name {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1rem;
    color: var(--text); line-height: 1.25; position: relative; z-index: 1;
}
.ic-gallery-card .meta {
    font-size: .72rem; color: var(--text-dim); letter-spacing: .3px;
    position: relative; z-index: 1; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
}
.ic-gallery-card .meta b { color: var(--accent); font-weight: 700; }

/* galeri filtre arama */
.ic-gallery-search {
    width: 100%; max-width: 420px; margin: 0 auto; display: block;
    padding: .7rem 1rem; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text); font-size: .9rem; outline: none; font-family: 'Inter', sans-serif;
    transition: border-color .2s, box-shadow .2s;
}
.ic-gallery-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

/* ─── SAYFA BAŞLIĞI (galeri/keşif) ───────────────────────── */
.ic-page-head { text-align: center; padding: 3.5rem 1rem 1rem; position: relative; }
.ic-page-head .eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: var(--accent); margin-bottom: .6rem;
}
.ic-page-head h1 {
    font-family: 'Playfair Display', serif; font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .4rem; color: var(--text);
}
.ic-page-head h1 em { color: var(--accent); font-style: italic; }
.ic-page-head p { color: var(--text-muted); max-width: 560px; margin: 0 auto; }

/* ─── TAKIMYILDIZ HERO ───────────────────────────────────── */
.ic-constellation {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    /* merkez (başlık alanı) şeffaf → ikonlar kenarlarda bir halka oluşturur, yazıyı boğmaz */
    -webkit-mask: radial-gradient(ellipse 78% 82% at 50% 44%, transparent 0%, transparent 26%, #000 50%, #000 72%, transparent 94%);
            mask: radial-gradient(ellipse 78% 82% at 50% 44%, transparent 0%, transparent 26%, #000 50%, #000 72%, transparent 94%);
    opacity: .55;
}
.ic-constellation canvas { width: 100%; height: 100%; display: block; }
.ic-hero { overflow: hidden; }
.ic-hero > .ic-container { position: relative; z-index: 2; }

/* ─── İSTATİSTİK SAYAÇLARI ───────────────────────────────── */
.ic-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: center; padding: 1.5rem 0; }
.ic-stat { text-align: center; min-width: 90px; }
.ic-stat .num {
    font-family: 'Playfair Display', serif; font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--accent); line-height: 1;
    text-shadow: 0 0 22px var(--accent-glow); font-variant-numeric: tabular-nums;
}
.ic-stat .lbl { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-top: .4rem; }

/* ─── PROFİL HERO (detay sayfaları) ──────────────────────── */
.ic-entity-hero {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 2.5rem 0 1.5rem; position: relative;
}
.ic-entity-hero .titles h1 {
    font-family: 'Playfair Display', serif; font-weight: 800; margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--text);
}
.ic-entity-hero .titles .sub { color: var(--text-muted); margin-top: .35rem; font-size: 1rem; }
.ic-entity-hero .titles .sub b { color: var(--accent); }

/* bağlantı bölümü başlığı */
.ic-rel-title {
    font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-dim); margin: 2rem 0 .9rem; display: flex; align-items: center; gap: .6rem;
}
.ic-rel-title::after { content:''; flex:1; height:1px; background: var(--border); }

/* yatay bağlı-olay zinciri */
.ic-rel-events { display: flex; flex-direction: column; gap: .5rem; }
.ic-rel-event {
    display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    text-decoration: none; transition: border-color .2s, transform .2s, background .2s;
}
.ic-rel-event:hover { border-color: var(--border-bright); transform: translateX(4px); background: var(--surface-2); text-decoration: none; }
.ic-rel-event .yr { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; font-size: .85rem; min-width: 64px; }
.ic-rel-event .nm { color: var(--text); font-size: .92rem; }

/* ─── ÇAĞ ATMOSFERİ (sayfa arka planı çağa göre) ─────────── */
body[data-cag] { transition: background-color .8s ease; }
body[data-cag="antique"]     { --cag-tint: 38, 28, 12; }
body[data-cag="prehistory"]  { --cag-tint: 30, 24, 16; }
body[data-cag="medieval"]    { --cag-tint: 40, 24, 30; }
body[data-cag="enlightment"] { --cag-tint: 24, 30, 40; }
body[data-cag="industrial"]  { --cag-tint: 30, 30, 34; }
body[data-cag="modern"]      { --cag-tint: 18, 28, 36; }
body[data-cag="21cen"]       { --cag-tint: 16, 30, 32; }
body[data-cag] .ic-cag-atmos {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
    background:
        radial-gradient(ellipse 70% 50% at 50% -5%, rgba(var(--cag-tint), .9) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 105%, rgba(var(--cag-tint), .6) 0%, transparent 55%);
}

/* ─── TEZHİP / ALTIN AYRAÇ ───────────────────────────────── */
.ic-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.5rem 0; color: var(--accent); opacity: .8; }
.ic-divider::before, .ic-divider::after {
    content: ''; height: 1px; width: min(120px, 22vw);
    background: linear-gradient(90deg, transparent, var(--accent));
}
.ic-divider::after { background: linear-gradient(90deg, var(--accent), transparent); }
.ic-divider i { font-size: 1.1rem; filter: drop-shadow(0 0 6px var(--accent-glow)); }

/* ─── TIMELINE: ÇAĞ BANTLARI ─────────────────────────────── */
.ic-era {
    position: relative; padding: 2.2rem 0 1rem 80px; border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--navbar-h) + 70px);
}
.ic-era-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
/* Çağ ikonu: satırın sol kenarında boydan boya dikey şerit */
.ic-era-strip {
    position: absolute; left: 0; top: 1.1rem; bottom: .6rem; width: 60px;
    background-size: cover; background-position: center;
    border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border);
}
@media (max-width: 600px) { .ic-era { padding-left: 58px; } .ic-era-strip { width: 44px; } }
.ic-era-head h2 { font-family: 'Playfair Display', serif; font-weight: 700; margin: 0; font-size: 1.6rem; color: var(--text); }
.ic-era-head .yrs { font-size: .78rem; color: var(--text-dim); letter-spacing: .5px; }
.ic-era-rail {
    display: flex; gap: 1rem; overflow-x: auto; padding: .5rem .25rem 1.5rem; scroll-snap-type: x proximity;
}
.ic-era-rail::-webkit-scrollbar { height: 8px; }
.ic-tl-event {
    scroll-snap-align: start; flex: 0 0 260px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
    display: flex; flex-direction: column; gap: .5rem; position: relative;
}
.ic-tl-event:hover { transform: translateY(-5px); border-color: var(--border-bright); box-shadow: var(--shadow-md), var(--shadow-glow); text-decoration: none; }
.ic-tl-event .yr { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .82rem; }
.ic-tl-event .nm { color: var(--text); font-weight: 500; font-size: .98rem; line-height: 1.35; font-family: 'Playfair Display', serif; }
.ic-tl-event .ents { display: flex; gap: 4px; margin-top: auto; flex-wrap: wrap; }
.ic-tl-event .ents img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; }

/* çağ navigasyon şeridi (timeline üst) */
.ic-era-nav {
    position: sticky; top: var(--navbar-h); z-index: 80;
    display: flex; gap: .4rem; overflow-x: auto; padding: .8rem 0;
    background: rgba(8,7,5,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.ic-era-nav a {
    flex: 0 0 auto; padding: .4rem .9rem; border-radius: 999px; font-size: .78rem; white-space: nowrap;
    border: 1px solid var(--border); color: var(--text-muted); transition: all .2s;
}
.ic-era-nav a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); text-decoration: none; }

/* ─── DUYARLI ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .ic-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
    .ic-entity-hero { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ic-med, .ic-gallery-card, .ic-tl-event { transition: none; }
    .ic-med:hover::before { animation: none; }
}