/* ============================================
   Himmet Tekeli - Ultra Premium v8.0
   Modern Financial Dashboard UI
   ============================================ */
/* Fonts loaded via <link> in HTML for non-blocking load */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    --bg-body: #f0f2f7;
    --bg-card: rgba(255,255,255,0.88);
    --bg-card-solid: #ffffff;
    --bg-glass: rgba(255,255,255,0.6);
    --bg-header: rgba(255,255,255,0.72);
    --bg-ticker: linear-gradient(90deg,#080b18,#0e1228,#080b18);
    --bg-input: #f1f2f8;
    --bg-overlay: rgba(0,0,0,0.4);
    --text-1: #0b0e1e;
    --text-2: #4a5068;
    --text-3: #8892b3;
    --text-inv: #ffffff;
    --gold: #c9a227;
    --gold-2: #e3be6d;
    --gold-3: #f0d78c;
    --gold-g: linear-gradient(135deg,#c9a227,#e3be6d,#f0d78c);
    --gold-glow: rgba(201,162,39,0.1);
    --gold-glow2: rgba(201,162,39,0.25);
    --border: rgba(0,0,0,0.08);
    --border-g: rgba(201,162,39,0.2);
    --green: #10b981;
    --red: #ef4444;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --amber: #f59e0b;
    --emerald: #10b981;
    --rose: #f43f5e;
    --green-bg: rgba(16,185,129,0.08);
    --red-bg: rgba(239,68,68,0.08);
    --blue-bg: rgba(59,130,246,0.08);
    --purple-bg: rgba(139,92,246,0.08);
    --sh-sm: 0 1px 3px rgba(0,0,0,0.06);
    --sh-md: 0 4px 20px rgba(0,0,0,0.06);
    --sh-lg: 0 12px 48px rgba(0,0,0,0.08);
    --sh-glow: 0 0 24px rgba(201,162,39,0.2), 0 0 60px rgba(201,162,39,0.06);
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
    --ease: cubic-bezier(0.16,1,0.3,1);
    --spring: cubic-bezier(0.34,1.56,0.64,1);
    --f1: 'Inter', system-ui, -apple-system, sans-serif;
    --fm: 'JetBrains Mono', monospace;
    --header-h: 90px;
    --ticker-h: 50px;
    --max-w: 100%;
    --content-max: 1720px;
    --safe-padding: clamp(12px, 3vw, 48px);
}

[data-theme="dark"] {
    --bg-body: #060914;
    --bg-card: rgba(14,18,40,0.75);
    --bg-card-solid: #0e1228;
    --bg-glass: rgba(12,16,35,0.55);
    --bg-header: rgba(6,9,20,0.78);
    --bg-input: rgba(18,22,52,0.6);
    --bg-overlay: rgba(0,0,0,0.65);
    --text-1: #e8ebf4;
    --text-2: #8892b3;
    --text-3: #4e5678;
    --text-inv: #060914;
    --gold: #e3be6d;
    --gold-2: #c9a227;
    --gold-g: linear-gradient(135deg,#c9a227,#e3be6d,#f0d78c);
    --gold-glow: rgba(227,190,109,0.06);
    --gold-glow2: rgba(227,190,109,0.15);
    --border: rgba(255,255,255,0.06);
    --border-g: rgba(227,190,109,0.12);
    --green: #34d399; --red: #f87171; --blue: #60a5fa; --purple: #a78bfa;
    --green-bg: rgba(52,211,153,0.08); --red-bg: rgba(248,113,113,0.08);
    --blue-bg: rgba(96,165,250,0.08); --purple-bg: rgba(167,139,250,0.08);
    --sh-sm: 0 1px 3px rgba(0,0,0,0.25);
    --sh-md: 0 4px 24px rgba(0,0,0,0.3);
    --sh-lg: 0 12px 48px rgba(0,0,0,0.4);
    --sh-glow: 0 0 30px rgba(227,190,109,0.15), 0 0 80px rgba(227,190,109,0.05);
}

/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:17px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top: calc(var(--header-h) + var(--ticker-h) + 20px); overflow-x:hidden }
body { font-family:var(--f1); background:var(--bg-body); color:var(--text-1); line-height:1.6; min-height:100vh; transition:background .5s var(--ease),color .3s var(--ease); overflow-x:hidden; width:100% }
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--r-full) }
::-webkit-scrollbar-thumb:hover { background:var(--gold) }
::selection { background:var(--gold); color:var(--text-inv) }
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }

/* ============================================
   ANIMATED BACKGROUND
   ============================================ */
.bg-effects { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.bg-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.4; will-change:transform; animation:orbFloat 20s ease-in-out infinite }
.bg-orb-1 { width:700px; height:700px; top:-12%; right:-8%; background:radial-gradient(circle,rgba(201,162,39,0.18),transparent 70%); animation-duration:25s; contain:strict }
.bg-orb-2 { width:550px; height:550px; bottom:-18%; left:-8%; background:radial-gradient(circle,rgba(99,102,241,0.10),transparent 70%); animation-duration:30s; animation-delay:-5s; contain:strict }
.bg-orb-3 { width:450px; height:450px; top:35%; left:45%; background:radial-gradient(circle,rgba(16,185,129,0.08),transparent 70%); animation-duration:22s; animation-delay:-10s; contain:strict }
@keyframes orbFloat {
    0%,100% { transform:translate(0,0) scale(1) }
    25% { transform:translate(30px,-40px) scale(1.05) }
    50% { transform:translate(-20px,30px) scale(0.95) }
    75% { transform:translate(40px,20px) scale(1.02) }
}
.bg-grid { position:absolute; inset:0; background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:60px 60px; opacity:0.3; contain:strict }
[data-theme="dark"] .bg-grid { opacity:0.12 }

/* Floating particles */
.bg-particles { position:absolute; inset:0 }
.particle { position:absolute; width:3px; height:3px; background:var(--gold); border-radius:50%; opacity:0; animation:particleFloat linear infinite }
@keyframes particleFloat {
    0% { opacity:0; transform:translateY(100vh) scale(0) }
    10% { opacity:0.6 }
    90% { opacity:0.3 }
    100% { opacity:0; transform:translateY(-20px) scale(1) }
}

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen { position:fixed; inset:0; z-index:9999; background:var(--bg-body); display:flex; align-items:center; justify-content:center; transition:opacity .3s ease-out }
.loading-screen.hidden { opacity:0; pointer-events:none }
.loading-content { text-align:center; display:flex; flex-direction:column; align-items:center; gap:28px }
.loading-logo-wrap { position:relative; width:300px; height:210px; display:flex; align-items:center; justify-content:center; overflow:hidden }
.loading-logo-img { width:260px; height:auto; object-fit:contain; filter:drop-shadow(0 0 30px rgba(201,162,39,0.4)); animation:logoFloat 3s ease-in-out infinite; will-change:transform }
@keyframes logoFloat {
    0%,100% { transform:translateY(0) scale(1) }
    50% { transform:translateY(-8px) scale(1.03) }
}
.loading-shimmer { position:absolute; inset:-20%; width:140%; height:140%; background:linear-gradient(105deg, transparent 35%, rgba(227,190,109,0.15) 45%, rgba(227,190,109,0.3) 50%, rgba(227,190,109,0.15) 55%, transparent 65%); animation:loadShimmer 2.5s ease-in-out infinite; pointer-events:none }
@keyframes loadShimmer { 0% { transform:translateX(-120%) } 100% { transform:translateX(120%) } }
.loading-bar { width:220px; height:3px; background:var(--border); border-radius:var(--r-full); overflow:hidden }
.loading-bar-fill { height:100%; background:var(--gold-g); border-radius:var(--r-full); animation:loadFill 2s ease-out forwards; transform-origin:left center; transform:scaleX(0) }
@keyframes loadFill { to{transform:scaleX(1)} }
.loading-text { font-size:.85rem; color:var(--text-3); font-weight:500; letter-spacing:0.5px }

/* ============================================
   HEADER
   ============================================ */
.site-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); background:var(--bg-header); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid var(--border); z-index:1000; transition:all .3s var(--ease); will-change:transform; contain:layout style }
.site-header.scrolled { box-shadow:var(--sh-lg) }
.header-container { max-width:var(--content-max); margin:0 auto; padding:0 var(--safe-padding); height:100%; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1 }

/* Logo centered */
.header-logo-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center }
.header-logo-img { height:60px; width:auto; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(201,162,39,0.2)); transition:all .3s var(--ease) }
.header-logo-center:hover .header-logo-img { filter:drop-shadow(0 4px 16px rgba(201,162,39,0.35)); transform:scale(1.04) }

/* Nav — left aligned */
.header-nav { display:flex; align-items:center; gap:0px; background:var(--bg-glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-full); padding:3px; position:relative; left:auto; transform:none; flex-shrink:1; min-width:0 }
.nav-link { padding:5px 12px; border-radius:var(--r-full); font-size:.72rem; font-weight:600; color:var(--text-2); transition:all .25s var(--ease); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:4px; position:relative }
.nav-link svg { opacity:0; width:0; height:0; transition:all .25s var(--ease) }
.nav-link:hover { color:var(--text-1); background:var(--gold-glow) }
.nav-link.active { color:#1a1000; background:var(--gold-g); box-shadow:0 2px 12px rgba(201,162,39,0.25); font-weight:700 }
.nav-link.active svg { opacity:1; width:12px; height:12px }
[data-theme="dark"] .nav-link.active { color:#1a1000 }
.nav-link::after { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--gold-g); opacity:0; transform:scale(0.85); transition:all .3s var(--ease); z-index:-1 }
.nav-link.active::after { opacity:0.15; transform:scale(1.08) }

.header-tools { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.digital-clock { display:flex; align-items:center; gap:2px; font-family:var(--fm); font-size:.95rem; font-weight:600; color:var(--text-1); padding:8px 16px; background:var(--bg-glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-full) }
.clock-separator { animation:blink 1s steps(1) infinite; color:var(--gold); margin:0 1px }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }
.clock-seconds { font-size:.75rem; color:var(--gold); font-weight:700; min-width:20px; text-align:center }

.icon-btn { width:40px; height:40px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease); position:relative; overflow:hidden }
.icon-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-glow); box-shadow:var(--sh-glow); transform:scale(1.08) }
.icon-btn .icon-sun, .icon-btn .icon-moon { position:absolute; transition:all .4s var(--spring); line-height:1; display:flex }
.icon-btn .icon-sun { opacity:1; transform:rotate(0) scale(1) }
.icon-btn .icon-moon { opacity:0; transform:rotate(-90deg) scale(.4) }
[data-theme="dark"] .icon-btn .icon-sun { opacity:0; transform:rotate(90deg) scale(.4) }
[data-theme="dark"] .icon-btn .icon-moon { opacity:1; transform:rotate(0) scale(1) }

.mobile-menu-toggle { display:none; flex-direction:column; gap:5px; padding:10px; border:none; background:none; cursor:pointer; min-width:44px; min-height:44px; align-items:center; justify-content:center }
.hamburger-line { width:22px; height:2px; background:var(--text-1); border-radius:2px; transition:all .3s var(--ease) }
.mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform:rotate(45deg) translateY(7px) }
.mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity:0 }
.mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform:rotate(-45deg) translateY(-7px) }

/* ============================================
   TICKER
   ============================================ */
.price-ticker { position:fixed; top:var(--header-h); left:0; right:0; height:var(--ticker-h); background:var(--bg-ticker); z-index:999; overflow:hidden; border-bottom:1px solid rgba(227,190,109,0.15); box-shadow:0 2px 12px rgba(0,0,0,0.25) }
.price-ticker::before, .price-ticker::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none }
.price-ticker::before { left:0; background:linear-gradient(90deg, #080b18 10%, transparent) }
.price-ticker::after { right:0; background:linear-gradient(-90deg, #080b18 10%, transparent) }
.ticker-track { display:flex; animation:tickerScroll 60s linear infinite; height:100%; align-items:center; width:max-content }
@keyframes tickerScroll { to{transform:translateX(-50%)} }
.ticker-item { display:flex; align-items:center; gap:12px; padding:0 30px; white-space:nowrap; border-right:none; position:relative }
.ticker-item::after { content:'·'; position:absolute; right:-2px; color:rgba(227,190,109,0.35); font-size:1.2rem; font-weight:900 }
.ticker-name { font-size:.82rem; font-weight:700; color:rgba(255,255,255,0.55); letter-spacing:0.8px; text-transform:uppercase }
.ticker-value { font-size:.95rem; font-weight:800; color:#fff; font-family:var(--fm); text-shadow:0 0 12px rgba(255,255,255,0.08) }
.ticker-change { font-size:.78rem; font-weight:700; font-family:var(--fm); padding:3px 10px; border-radius:var(--r-full) }
.ticker-change.up { color:#34d399; background:rgba(52,211,153,0.15) }
.ticker-change.down { color:#f87171; background:rgba(248,113,113,0.15) }
.ticker-change.neutral { color:rgba(255,255,255,0.45) }

/* Dark theme ticker (default) */
[data-theme="dark"] .price-ticker { background:linear-gradient(90deg,#080b18,#0e1228,#080b18); box-shadow:0 2px 12px rgba(0,0,0,0.25) }
[data-theme="dark"] .price-ticker::before { background:linear-gradient(90deg, #080b18 10%, transparent) }
[data-theme="dark"] .price-ticker::after { background:linear-gradient(-90deg, #080b18 10%, transparent) }
[data-theme="dark"] .ticker-name { color:rgba(255,255,255,0.55) }
[data-theme="dark"] .ticker-value { color:#fff; text-shadow:0 0 12px rgba(255,255,255,0.08) }
[data-theme="dark"] .ticker-change.neutral { color:rgba(255,255,255,0.45) }
[data-theme="dark"] .ticker-item::after { color:rgba(227,190,109,0.35) }

/* Light theme ticker */
[data-theme="light"] .price-ticker { background:linear-gradient(90deg,#faf8f2,#f5f0e3,#faf8f2); box-shadow:0 2px 12px rgba(0,0,0,0.06); border-bottom-color:rgba(201,162,39,0.2) }
[data-theme="light"] .price-ticker::before { background:linear-gradient(90deg, #faf8f2 10%, transparent) }
[data-theme="light"] .price-ticker::after { background:linear-gradient(-90deg, #faf8f2 10%, transparent) }
[data-theme="light"] .ticker-name { color:rgba(0,0,0,0.5) }
[data-theme="light"] .ticker-value { color:#1a1a2e; text-shadow:none }
[data-theme="light"] .ticker-change.neutral { color:rgba(0,0,0,0.35) }
[data-theme="light"] .ticker-item::after { color:rgba(201,162,39,0.4) }

/* ============================================
   MAIN & LAYOUT
   ============================================ */
.main-content { margin-top:calc(var(--header-h) + var(--ticker-h)); padding:0 var(--safe-padding); max-width:var(--content-max); margin-left:auto; margin-right:auto; position:relative; z-index:1 }
.main-content > section,
.main-content > .glass-card.full-width,
.main-content > div.tables-grid,
.main-content > div.update-strip { margin-bottom:32px }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:0 4px }

/* ============================================
   FADE-UP ANIMATION
   ============================================ */
.fade-up { opacity:0; transform:translateY(30px); animation:fadeUp .8s var(--ease) forwards; will-change:transform, opacity }
.delay-1 { animation-delay:.15s }
.delay-2 { animation-delay:.3s }
.delay-3 { animation-delay:.45s }
@keyframes fadeUp { to { opacity:1; transform:translateY(0) } }
/* Reduce layout shift: remove will-change after animation ends */
.fade-up.animated { will-change:auto }

/* ============================================
   HERO SECTION  (Moved to TOP)
   ============================================ */
.hero-section { padding:40px 0 24px; overflow:visible; position:relative; z-index:1 }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; min-width:0 }
.hero-text-block { display:flex; flex-direction:column; gap:20px }
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 20px; background:var(--gold-glow); border:1px solid var(--border-g); border-radius:var(--r-full); font-size:.88rem; font-weight:600; color:var(--gold); width:fit-content; animation:badgeGlow 3s ease-in-out infinite }
@keyframes badgeGlow {
    0%,100% { box-shadow:0 0 0 0 transparent }
    50% { box-shadow:0 0 20px rgba(201,162,39,0.15) }
}
.pulse-dot { width:9px; height:9px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; flex-shrink:0 }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.8)} }
.hero-section h1 { font-size:clamp(2.2rem,4vw,3.4rem); font-weight:900; line-height:1.15; letter-spacing:-0.02em }
.gold-text { background:var(--gold-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-desc { font-size:1.1rem; color:var(--text-2); line-height:1.7; max-width:520px }
.hero-actions { display:flex; gap:14px; margin-top:8px }
.hero-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 30px; border-radius:var(--r-full); font-size:1rem; font-weight:700; transition:all .3s var(--ease); cursor:pointer; border:none; position:relative; overflow:hidden }
.hero-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.15) 50%,transparent 70%); transform:translateX(-100%); transition:transform .6s var(--ease) }
.hero-btn:hover::after { transform:translateX(100%) }
.hero-btn.primary { background:var(--gold-g); color:#1a1000; box-shadow:0 4px 20px rgba(201,162,39,0.3) }
.hero-btn.primary:hover { transform:translateY(-3px); box-shadow:0 8px 36px rgba(201,162,39,0.4) }
.hero-btn.secondary { background:var(--bg-card); color:var(--text-1); border:1px solid var(--border); box-shadow:var(--sh-sm) }
.hero-btn.secondary:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px) }

/* Hero Logo Animation */
.hero-logo-block { display:flex; align-items:center; justify-content:center; perspective:600px }
.hero-logo-anim { position:relative; display:flex; align-items:center; justify-content:center; width:360px; height:260px; overflow:hidden }
.hero-logo-img { width:320px; height:auto; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 8px 32px rgba(201,162,39,0.35)); animation:heroLogo3D 8s ease-in-out infinite; transform-style:preserve-3d }
@keyframes heroLogo3D {
    0%    { transform:rotateY(0deg) rotateX(0deg) scale(1) }
    25%   { transform:rotateY(8deg) rotateX(-4deg) scale(1.03) }
    50%   { transform:rotateY(0deg) rotateX(0deg) scale(1.05) }
    75%   { transform:rotateY(-8deg) rotateX(4deg) scale(1.03) }
    100%  { transform:rotateY(0deg) rotateX(0deg) scale(1) }
}
.hero-logo-glow { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle, rgba(201,162,39,0.3) 0%, rgba(201,162,39,0.1) 40%, transparent 70%); z-index:1; animation:heroGlowPulse 4s ease-in-out infinite }
@keyframes heroGlowPulse {
    0%,100% { transform:scale(1); opacity:.6 }
    50% { transform:scale(1.2); opacity:1 }
}
.hero-logo-ring { position:absolute; inset:-8px; border-radius:50%; border:1.5px solid rgba(201,162,39,0.12); z-index:0; animation:heroRingSpin 25s linear infinite }
@keyframes heroRingSpin { to { transform:rotate(360deg) } }
.hero-logo-ring::before { content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px rgba(201,162,39,0.7); transform:translateX(-50%) }
.hero-logo-ring::after { content:''; position:absolute; bottom:-4px; left:50%; width:5px; height:5px; border-radius:50%; background:rgba(201,162,39,0.5); box-shadow:0 0 10px rgba(201,162,39,0.4); transform:translateX(-50%) }

.hero-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0 }
.hero-stat-card { display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-md); transition:all .35s var(--ease); position:relative; overflow:hidden; min-width:0 }
.hero-stat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 60%,var(--gold-glow)); opacity:0; transition:opacity .3s }
.hero-stat-card:hover { transform:translateX(-6px); box-shadow:var(--sh-lg); border-color:var(--border-g) }
.hero-stat-card:hover::before { opacity:1 }
.hero-stat-card.gold-glow { border-color:var(--border-g); box-shadow:var(--sh-md),0 0 20px rgba(201,162,39,0.08) }
.hsc-icon { width:42px; height:42px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background:var(--gold-glow); color:var(--gold); flex-shrink:0; transition:transform .3s var(--spring) }
.hsc-icon i { font-size:18px }
.hero-stat-card:hover .hsc-icon { transform:scale(1.1) rotate(-5deg) }
.hsc-icon.blue { background:var(--blue-bg); color:var(--blue) }
.hsc-icon.green { background:var(--green-bg); color:var(--green) }
.hsc-icon.purple { background:var(--purple-bg); color:var(--purple) }
.hsc-icon.orange { background:rgba(234,88,12,0.12); color:#ea580c }
[data-theme="dark"] .hsc-icon.orange { color:#fb923c }
.hsc-info { display:flex; flex-direction:column; flex:1; min-width:0; overflow:hidden }
.hsc-label { font-size:.72rem; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hsc-value { font-size:1.35rem; font-weight:800; font-family:var(--fm); color:var(--text-1); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hsc-unit { font-size:.72rem; color:var(--text-3); font-weight:500 }
.hsc-change { font-size:.68rem; font-weight:700; letter-spacing:.3px; display:inline-flex; align-items:center; gap:3px; padding:1px 0; transition:color .3s }
.hsc-change.up { color:var(--green) }
.hsc-change.down { color:var(--red) }
.hsc-change:empty { display:none }

/* Hero Update Bar */
.hero-update-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; margin-top:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-full); font-size:.78rem; color:var(--text-3); box-shadow:var(--sh-sm) }
.hub-left { display:flex; align-items:center; gap:8px }
.hub-left svg { color:var(--gold); flex-shrink:0 }
.hub-left strong { color:var(--text-1); font-family:var(--fm) }
.hub-right { display:flex; align-items:center; gap:8px }
.hub-badge { font-size:.62rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); background:var(--green-bg); padding:3px 10px; border-radius:var(--r-full) }
.hub-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite }

/* Price flash animation */
@keyframes priceFlash {
    0%   { background:transparent }
    30%  { background:rgba(201,162,39,0.12); transform:scale(1.01) }
    100% { background:transparent; transform:scale(1) }
}
.price-updated { animation:priceFlash .6s ease-out }

/* ============================================
   UPDATE STRIP
   ============================================ */
.update-strip { margin-bottom:28px }
.update-strip-inner { display:flex; align-items:center; gap:12px; justify-content:center; padding:12px 28px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-full); font-size:.88rem; color:var(--text-2); font-weight:500; box-shadow:var(--sh-sm); flex-wrap:wrap; position:relative; overflow:hidden }
.update-strip-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold-g); opacity:0.5 }
.update-dot-live { width:8px; height:8px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; flex-shrink:0 }
.update-strip strong { color:var(--gold); font-family:var(--fm); font-weight:600 }
.update-sep { color:var(--border); margin:0 4px }

/* Data Source Badge */
.data-source-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:linear-gradient(135deg, rgba(201,162,39,0.12), rgba(201,162,39,0.04)); border:1px solid var(--border-g); border-radius:var(--r-full); font-size:.75rem; font-weight:700; color:var(--gold); letter-spacing:.5px; text-transform:uppercase }
.data-source-badge .ds-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:pulse 2s ease-in-out infinite }

.mi-status { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.mi-status.open { background:var(--green); box-shadow:0 0 8px rgba(16,185,129,0.4) }
.mi-status.closed { background:var(--red); box-shadow:0 0 8px rgba(239,68,68,0.4) }

/* ============================================
   GLASS CARDS
   ============================================ */
.glass-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-md); overflow:hidden; transition:all .35s var(--ease); position:relative; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px) }
.calc-grid > .glass-card { padding:32px }
.glass-card:hover { box-shadow:var(--sh-lg); border-color:var(--border-g); transform:translateY(-1px) }
.glass-card.full-width { margin:0 }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:10px; position:relative; min-width:0 }
.card-header::after { content:''; position:absolute; bottom:-1px; left:24px; right:24px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-glow2), transparent) }
.card-title-wrap { display:flex; align-items:center; gap:12px }
.card-icon { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s var(--spring) }
.glass-card:hover .card-icon { transform:scale(1.1) rotate(-3deg) }
.card-icon.gold { background:var(--gold-glow); color:var(--gold) }
.card-icon.amber { background:rgba(245,158,11,0.1); color:var(--amber) }
.card-icon.blue { background:var(--blue-bg); color:var(--blue) }
.card-icon.purple { background:var(--purple-bg); color:var(--purple) }
.card-icon.emerald { background:var(--green-bg); color:var(--emerald) }
.card-icon.rose { background:rgba(244,63,94,0.08); color:var(--rose) }
.card-icon.green { background:var(--green-bg); color:var(--green) }
.card-title { font-size:1.05rem; font-weight:700; color:var(--text-1) }

/* Live Badge in card header */
.card-badge-live { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--r-full); font-size:.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:rgba(52,211,153,0.08); color:var(--green); border:1px solid rgba(52,211,153,0.15); animation:livePulse 3s ease-in-out infinite }
.card-badge-live .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite }
.card-badge-live .badge-dot.blue { background:var(--blue) }
.card-badge-live .badge-dot.purple { background:var(--purple) }
@keyframes livePulse {
    0%,100% { opacity:1 }
    50% { opacity:0.7 }
}

.card-tools { display:flex; align-items:center; gap:12px }
.card-badge { padding:5px 14px; background:var(--gold-glow); border:1px solid var(--border-g); border-radius:var(--r-full); font-size:.8rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:1px }
.search-box { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-full); transition:all .25s var(--ease) }
.search-box:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.search-box svg { color:var(--text-3); flex-shrink:0 }
.search-box input { border:none; background:none; outline:none; font-size:.92rem; color:var(--text-1); font-family:var(--f1); width:120px }
.search-box input::placeholder { color:var(--text-3) }

.live-tag { display:flex; align-items:center; gap:8px; padding:6px 16px; background:var(--green-bg); border:1px solid rgba(16,185,129,0.15); border-radius:var(--r-full); font-size:.85rem; font-weight:600; color:var(--green) }

/* ============================================
   TABLES GRID
   ============================================ */
.tables-grid { display:grid; gap:24px; margin-bottom:32px; align-items:start }
.tables-grid.two-cols { grid-template-columns:1fr 1fr }
.tables-grid.three-cols { grid-template-columns:repeat(3, 1fr) }

/* Main Quad: Altın (geniş) + Döviz + Sarrafiye + Gümüş */
.tables-grid.main-quad { grid-template-columns:1.25fr 0.85fr 1.1fr 1fr; gap:16px }
.tables-grid.darphane-row { grid-template-columns:1fr }

@media (max-width:1300px) { 
    .tables-grid.three-cols { grid-template-columns:1fr 1fr }
    .tables-grid.main-quad { grid-template-columns:1fr 1fr }
}
@media (max-width:900px) { 
    .tables-grid.three-cols { grid-template-columns:1fr } 
    .tables-grid.two-cols { grid-template-columns:1fr }
    .tables-grid.main-quad { grid-template-columns:1fr }
}

/* Content scaling for quad grid */
.main-quad .glass-card .card-header { padding:14px 16px }
.main-quad .glass-card .card-title { font-size:.92rem }
.main-quad .glass-card .card-icon { width:34px; height:34px; font-size:16px }
.main-quad .cl-item { padding:10px 14px }
.main-quad .cl-item:nth-child(even) { background:rgba(255,255,255,0.015) }
[data-theme="light"] .main-quad .cl-item:nth-child(even) { background:rgba(0,0,0,0.015) }
.main-quad .cl-name { font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.main-quad .cl-col-val { font-size:.92rem }

/* Currency flag badge */
.cl-flag-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:16px; border-radius:3px; font-size:.55rem; font-weight:800; color:#fff; letter-spacing:.5px; line-height:1; margin-right:4px; vertical-align:middle; text-transform:uppercase; flex-shrink:0 }
.main-quad .cl-col-lbl { font-size:.62rem }
.main-quad .cl-change { font-size:.6rem; padding:2px 6px }
.main-quad .cl-price-col { padding:2px 8px }
.main-quad .card-badge-live { font-size:.6rem; padding:3px 8px }

/* Sarrafiye section: enhanced typography */
#sarrafiye .cl-name { font-size:.95rem; font-weight:800 }
#sarrafiye .cl-col-val { font-size:.95rem }
#sarrafiye .cl-col-lbl { font-size:.64rem }
#sarrafiye .card-title { font-size:1.1rem }

/* Card tools row (chart header) */
.card-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0 }

.stacked-col { display:flex; flex-direction:column; gap:14px }

/* ============================================
   COMPACT LIST UI
   ============================================ */
.compact-list { padding:0; display:flex; flex-direction:column; gap:0 }
.cl-item { background:var(--bg-card); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding:12px 20px; transition:all .25s var(--ease); position:relative; min-width:0; gap:8px }
.cl-item:last-child { border-bottom:none }
.cl-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-g); opacity:0; transition:opacity .25s }
.cl-item:hover { background:var(--gold-glow); padding-left:24px }
.cl-item:hover::before { opacity:1 }
.cl-item.eski:hover::before { background:linear-gradient(135deg, var(--rose), #ff6b8a) }
.cl-head { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; overflow:hidden }
.cl-name { font-weight:700; font-size:.88rem; color:var(--text-1); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cl-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; box-shadow:0 0 4px var(--gold); flex-shrink:0 }
.cl-change { font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:4px; font-family:var(--fm); align-self:flex-start; letter-spacing:.3px; white-space:nowrap }
.cl-change.up { background:rgba(16,185,129,0.15); color:var(--green) }
.cl-change.down { background:rgba(239,68,68,0.15); color:var(--red) }
.cl-change.neutral { background:rgba(128,128,128,0.12); color:var(--text-2) }

.cl-prices { display:flex; gap:0; align-items:stretch; text-align:right; flex-shrink:0; min-width:0 }
.cl-price-col { display:flex; flex-direction:column; gap:2px; text-align:right; padding:4px 12px; min-width:0 }
.cl-price-col + .cl-price-col { border-left:1px solid var(--border) }
.cl-col-lbl { font-size:.62rem; color:var(--text-3); text-transform:uppercase; font-weight:700; letter-spacing:0.5px; white-space:nowrap }
.cl-col-lbl.alis-lbl { color:var(--green) }
.cl-col-lbl.satis-lbl { color:var(--gold) }
.cl-col-val { font-family:var(--fm); font-size:.88rem; font-weight:700; color:var(--text-1); white-space:nowrap }
.cl-col-val.satis-val { color:var(--gold) }

/* Price update flash animation */
@keyframes priceFlash {
    0% { background:rgba(227,190,109,0.25); transform:scale(1.02) }
    100% { background:transparent; transform:scale(1) }
}
.price-flash { animation:priceFlash 1.2s var(--ease) }

/* Section divider (Eski Sarrafiye sub-header inside card) */
.cl-section-divider { padding:8px 14px; background:linear-gradient(135deg, rgba(244,63,94,0.08), rgba(244,63,94,0.02)); border-top:2px solid rgba(244,63,94,0.12); border-bottom:1px solid var(--border); position:relative }
.cl-section-divider::before { content:''; position:absolute; top:-2px; left:14px; right:14px; height:2px; background:linear-gradient(90deg, transparent, rgba(244,63,94,0.4), transparent) }
.cl-section-label { font-size:.65rem; font-weight:700; color:var(--rose); text-transform:uppercase; letter-spacing:1.8px; display:flex; align-items:center; gap:6px }
.cl-section-label::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:var(--rose); box-shadow:0 0 8px rgba(244,63,94,0.5); animation:pulse 2s ease-in-out infinite }
.cl-item.eski .cl-dot { background:var(--rose); box-shadow:0 0 4px var(--rose) }
.cl-item.eski { font-size:.95em }

/* ============================================
   DARPHANE İŞÇİLİK — Card Grid
   ============================================ */
.darphane-section { margin-bottom:32px; contain:layout style; min-height:180px }
.darphane-cards-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; padding:24px }

/* Individual Card */
.dc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:all .35s var(--ease); position:relative }
.dc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(135deg, var(--gold), var(--gold-2)); opacity:.8; transition:opacity .3s }
.dc-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(201,162,39,0.15); border-color:rgba(201,162,39,0.3) }
.dc-card:hover::before { opacity:1; height:4px }

/* Card Header */
.dc-card-header { padding:16px 18px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, rgba(201,162,39,0.04), transparent) }
.dc-card-icon { font-size:.75rem; color:var(--gold); filter:drop-shadow(0 0 4px rgba(201,162,39,0.4)) }
.dc-card-name { font-size:.92rem; font-weight:700; color:var(--text-1); letter-spacing:-0.01em }

/* Card Body */
.dc-card-body { padding:14px 18px 16px }

/* Price Row */
.dc-price-row { display:flex; align-items:center; gap:10px; padding:10px 0; min-width:0 }
.dc-price-row + .dc-price-row { border-top:1px dashed var(--border) }
.dc-row-label { font-size:.64rem; padding:4px 10px; border-radius:6px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; min-width:42px; text-align:center; flex-shrink:0 }
.dc-row-label.yeni { background:linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.08)); color:var(--green); border:1px solid rgba(16,185,129,0.15) }
.dc-row-label.eski { background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.05)); color:var(--red); border:1px solid rgba(239,68,68,0.1) }

/* Prices */
.dc-prices { flex:1; display:flex; gap:0; min-width:0 }
.dc-price-col { flex:1; text-align:right; padding:0 8px; min-width:0 }
.dc-price-col + .dc-price-col { border-left:1px solid var(--border) }
.dc-price-label { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3); font-weight:600; margin-bottom:2px; white-space:nowrap }
.dc-price-val { font-family:var(--fm); font-size:.9rem; font-weight:600; color:var(--text-2); white-space:nowrap }
.dc-price-val.satis { color:var(--gold); font-weight:700 }

/* Responsive */
/* Darphane responsive handled by auto-fill above */

/* ============================================
   CHART
   ============================================ */
.chart-body { padding:28px }
.chart-info { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap }
.chart-current-price { font-size:2.2rem; font-weight:800; font-family:var(--fm); color:var(--text-1) }
.chart-price-change { font-size:.92rem; font-weight:600; font-family:var(--fm); padding:5px 14px; border-radius:var(--r-full) }
.chart-price-change.up { color:var(--green); background:var(--green-bg) }
.chart-price-change.down { color:var(--red); background:var(--red-bg) }
.chart-canvas { position:relative; width:100%; height:360px; cursor:crosshair; border-radius:var(--r-md); overflow:hidden; background:transparent }
.mini-chart { width:100%; height:100%; display:block }
.chart-area { fill:url(#chartGradient) }
.chart-line { fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 4px rgba(201,162,39,0.3)) }
.chart-tabs { display:flex; gap:2px; background:var(--bg-input); border-radius:var(--r-full); padding:4px; flex-shrink:0 }
.chart-tab { padding:7px 14px; border-radius:var(--r-full); border:none; background:transparent; color:var(--text-3); font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s var(--ease); font-family:var(--f1); white-space:nowrap }
.chart-tab:hover { color:var(--text-1) }
.chart-tab.active { background:var(--gold-g); color:#1a1000; box-shadow:0 2px 8px rgba(201,162,39,0.25) }
.chart-crosshair-v { position:absolute; top:0; bottom:0; width:1px; background:var(--gold); opacity:0; pointer-events:none; transition:opacity .15s }
.chart-crosshair-v.visible { opacity:.4 }
.chart-dot { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--gold); border:2px solid var(--bg-card-solid); box-shadow:0 0 12px rgba(201,162,39,0.4); transform:translate(-50%,-50%); opacity:0; pointer-events:none; transition:opacity .15s }
.chart-dot.visible { opacity:1 }
.chart-tooltip { position:absolute; background:var(--bg-card-solid); border:1px solid var(--border-g); border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:opacity .15s; z-index:10 }
.chart-tooltip.visible { opacity:1 }
.chart-tooltip-value { font-size:1.1rem; font-weight:700; font-family:var(--fm); color:var(--gold) }
.chart-tooltip-time { font-size:.78rem; color:var(--text-3); margin-top:3px }

/* Chart gold selector */
.chart-select { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-full); padding:8px 32px 8px 14px; font-size:.85rem; font-family:var(--f1); font-weight:600; color:var(--text-1); cursor:pointer; transition:all .25s var(--ease); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892b3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; outline:none; min-width:120px; max-width:100% }
.chart-select:hover { border-color:var(--gold) }
.chart-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.chart-select option { background:var(--bg-card-solid); color:var(--text-1); padding:8px }

/* ============================================
   CALCULATOR MODAL
   ============================================ */
.modal-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .35s var(--ease); padding:16px }
.modal-overlay.active, .modal-overlay.open { opacity:1; visibility:visible }
.modal-container { width:100%; max-width:680px; max-height:90vh; background:var(--bg-card-solid); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 24px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(227,190,109,0.06); overflow:hidden; transform:translateY(24px) scale(0.96); transition:all .35s var(--spring); display:flex; flex-direction:column }
.modal-overlay.active .modal-container, .modal-overlay.open .modal-container { transform:translateY(0) scale(1) }

.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border) }
.modal-title-wrap { display:flex; align-items:center; gap:12px }
.modal-title { font-size:1.1rem; font-weight:700; color:var(--text-1) }
.modal-close-btn { width:36px; height:36px; border:1px solid var(--border); border-radius:var(--r-md); background:transparent; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease) }
.modal-close-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-bg) }

.modal-tabs { display:flex; gap:0; padding:0; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.03); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none }
.modal-tabs::-webkit-scrollbar { display:none }
[data-theme="dark"] .modal-tabs { background:rgba(255,255,255,0.02) }
.modal-tab { flex:1; padding:12px 14px; font-size:.78rem; font-weight:600; color:var(--text-3); background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:all .25s var(--ease); display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; min-width:0 }
.modal-tab:hover { color:var(--text-1); background:var(--gold-glow) }
.modal-tab.active { color:var(--gold); border-bottom-color:var(--gold) }
.modal-tab.active svg { stroke:var(--gold) }

.modal-body { padding:24px; overflow-y:auto; flex:1 }
.modal-tab-content { display:none }
.modal-tab-content.active { display:block; animation:fadeTabIn .3s var(--ease) }
@keyframes fadeTabIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* Live Price Strip */
.calc-live-strip { display:flex; align-items:center; gap:8px; padding:10px 16px; background:linear-gradient(135deg, rgba(201,162,39,0.08), rgba(201,162,39,0.03)); border:1px solid rgba(201,162,39,0.12); border-radius:var(--r-md); margin-bottom:18px; font-size:.82rem; color:var(--text-2) }
.cls-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; flex-shrink:0 }
.cls-text strong { color:var(--gold); font-family:var(--fm) }

/* Modal Footer */
.modal-footer { padding:12px 24px; border-top:1px solid var(--border); text-align:center }
.modal-footer-text { font-size:.72rem; color:var(--text-3); font-weight:500 }

/* Optgroup Styling */
.calc-select optgroup { font-weight:700; font-size:.82rem; color:var(--text-2) }
.calc-select option { font-weight:500; padding:6px 8px }

.calc-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px }
.calc-form { display:flex; flex-direction:column; gap:0 }
.calc-input-group { display:flex; flex-direction:column; gap:8px }
.calc-label { font-size:.78rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px }
.calc-input-wrap { display:flex; align-items:center; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md); padding:0 14px; transition:all .25s var(--ease) }
.calc-input-wrap:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.calc-input { flex:1; border:none; background:none; padding:12px 0; font-size:1rem; font-family:var(--fm); color:var(--text-1); outline:none; font-weight:600 }
.calc-unit { font-size:.82rem; font-weight:700; color:var(--text-3); text-transform:uppercase }
.calc-select { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:.92rem; font-family:var(--f1); color:var(--text-1); outline:none; cursor:pointer; font-weight:500; transition:all .25s var(--ease); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892b3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center }
.calc-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.calc-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; background:var(--gold-g); border:none; border-radius:var(--r-md); color:#1a1000; font-size:.95rem; font-weight:700; cursor:pointer; font-family:var(--f1); transition:all .3s var(--ease); box-shadow:0 4px 16px rgba(201,162,39,0.3); position:relative; overflow:hidden; margin-top:4px }
.calc-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.2) 50%,transparent 70%); transform:translateX(-100%); transition:transform .5s }
.calc-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,162,39,0.4) }
.calc-btn:hover::after { transform:translateX(100%) }
.calc-btn:active { transform:translateY(0) }
.calc-results { display:flex; flex-direction:column; gap:0; margin-top:20px; border-top:1px solid var(--border); padding-top:16px }
.calc-result-item { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border) }
.calc-result-item:last-child { border-bottom:none }
.cri-label { font-size:.88rem; color:var(--text-2); font-weight:500 }
.cri-value { font-size:1.05rem; font-weight:700; font-family:var(--fm); color:var(--text-1) }
.calc-result-item.highlight .cri-value { color:var(--gold); font-size:1.1rem }
@media (max-width:640px) {
    .calc-row { grid-template-columns:1fr }
    .modal-container { max-height:92vh; max-width:100%; border-radius:var(--r-md); margin:0 }
    .modal-overlay { padding:4px }
    .modal-body { padding:14px; overflow-y:auto; max-height:calc(92vh - 140px) }
    .modal-header { padding:14px 16px }
    .modal-title { font-size:1rem }
    .modal-tab { padding:10px 6px; font-size:.70rem }
    .modal-tab svg { width:11px; height:11px }
    .calc-input { font-size:.92rem; padding:10px 0 }
    .calc-select { padding:10px 12px; font-size:.85rem }
    .calc-btn { padding:12px; font-size:.88rem }
    .cri-label { font-size:.82rem }
    .cri-value { font-size:.95rem }
    .calc-result-item { padding:10px 0 }
}

/* ============================================
   TOAST
   ============================================ */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column-reverse; gap:8px }
.toast { display:flex; align-items:center; gap:12px; padding:16px 24px; background:var(--bg-card-solid); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-lg); font-size:.95rem; font-weight:500; min-width:280px; animation:toastIn .4s var(--spring) }
@keyframes toastIn { from{transform:translateX(100%) scale(.8);opacity:0} to{transform:translateX(0) scale(1);opacity:1} }
.toast-exit { animation:toastOut .3s var(--ease) forwards }
@keyframes toastOut { to{transform:translateX(100%) scale(.8);opacity:0} }
.toast-icon { font-size:1.1rem }

/* ============================================
   SCROLL TOP
   ============================================ */
.scroll-top-btn { position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:var(--gold-g); color:#1a1000; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(201,162,39,0.3); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(20px); transition:all .3s var(--ease); z-index:999 }
.scroll-top-btn.visible { opacity:1; transform:translateY(0) }
.scroll-top-btn:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(201,162,39,0.4) }

/* ============================================
   FOOTER — Modern Minimal v3
   ============================================ */
.site-footer { background:var(--bg-card-solid); border-top:1px solid var(--border); position:relative; overflow:hidden; margin-top:48px }
.footer-accent { height:3px; background:var(--gold-g); width:100% }
.footer-inner { max-width:var(--content-max); margin:0 auto; padding:36px var(--safe-padding) 24px }

/* Top row: brand + social icons */
.ft-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--border); gap:20px; flex-wrap:wrap }
.ft-brand { display:flex; align-items:center; gap:14px }
.ft-logo { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(201,162,39,0.25)); flex-shrink:0 }
.ft-name { display:block; font-size:1.1rem; font-weight:800; color:var(--text-1); letter-spacing:-0.02em; line-height:1.2 }
.ft-slogan { display:block; font-size:.68rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:1.2px; margin-top:2px }

/* Social icon buttons */
.ft-social { display:flex; gap:8px }
.ft-social-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--bg-input); color:var(--text-3); font-size:16px; transition:all .25s var(--ease) }
.ft-social-btn:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,0.15) }
.ft-social-btn.whatsapp:hover { color:#25d366; border-color:#25d366; background:rgba(37,211,102,0.08) }
.ft-social-btn.instagram:hover { color:#e4405f; border-color:#e4405f; background:rgba(228,64,95,0.08) }
.ft-social-btn.phone:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-glow) }
.ft-social-btn.mail:hover { color:var(--blue); border-color:var(--blue); background:var(--blue-bg) }

/* Contact strip */
.ft-contact { display:flex; flex-wrap:wrap; gap:8px 28px; padding:20px 0; border-bottom:1px solid var(--border) }
.ft-contact-item { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-3); white-space:nowrap }
.ft-contact-item i { color:var(--gold); font-size:12px; width:14px; text-align:center; flex-shrink:0 }
.ft-contact-item a { color:var(--text-2); text-decoration:none; font-weight:500; transition:color .2s var(--ease) }
.ft-contact-item a:hover { color:var(--gold) }
.ft-contact-item span { font-weight:500; color:var(--text-2) }

/* Bottom bar */
.ft-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:18px; gap:12px; flex-wrap:wrap }
.ft-copy { font-size:.78rem; color:var(--text-2); font-weight:500 }
.ft-disclaimer { font-size:.72rem; color:var(--text-2) }
.footer-version { font-size:.68rem; font-weight:700; color:var(--gold); background:var(--gold-glow); padding:3px 10px; border-radius:var(--r-full); border:1px solid var(--border-g); letter-spacing:0.5px; text-decoration:none; transition:all .2s var(--ease) }
.footer-version:hover { background:var(--gold); color:#0a0e1a; border-color:var(--gold) }

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal-card { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); will-change:transform, opacity }
.reveal-card.revealed { opacity:1; transform:translateY(0); will-change:auto }
.reveal-card:nth-child(2) { transition-delay:.1s }
.reveal-card:nth-child(3) { transition-delay:.2s }
.reveal-card:nth-child(4) { transition-delay:.3s }

/* ============================================
   DATA TABLES (legacy support)
   ============================================ */
.table-wrap { overflow-x:auto }
.data-table { width:100%; border-collapse:collapse }
.data-table thead { background:var(--bg-input) }
.data-table th { padding:14px 24px; font-size:.82rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap }
.data-table td { padding:16px 24px; font-size:1rem; border-bottom:1px solid var(--border); transition:background .2s }
.data-table tbody tr { transition:all .2s var(--ease) }
.data-table tbody tr:hover { background:var(--gold-glow) }
.data-table tbody tr:last-child td { border-bottom:none }
.price-name { display:flex; align-items:center; gap:12px; font-weight:600; white-space:nowrap; font-size:1rem }
.price-name-dot { width:9px; height:9px; border-radius:50%; background:var(--gold-g); flex-shrink:0; box-shadow:0 0 6px rgba(201,162,39,0.3) }
.price-value { font-family:var(--fm); font-weight:600; font-size:1rem; color:var(--text-1) }
.price-change-cell { font-family:var(--fm); font-size:.88rem; font-weight:600; padding:4px 12px; border-radius:var(--r-full); display:inline-block }
.price-change-cell.up { color:var(--green); background:var(--green-bg) }
.price-change-cell.down { color:var(--red); background:var(--red-bg) }
.price-change-cell.neutral { color:var(--text-3) }

/* ============================================
   RESPONSIVE
   ============================================ */

/* ---- 1400px: slightly narrower desktops ---- */
@media (max-width:1400px) {
    .tables-grid.main-quad { grid-template-columns:1.1fr 0.9fr 1fr 1fr; gap:14px }
}

/* ---- 1200px: tablets landscape ---- */
@media (max-width:1200px) {
    .hero-grid { grid-template-columns:1fr; gap:28px }
    .hero-logo-block { order:-1 }
    .hero-logo-anim { width:320px; height:240px }
    .hero-logo-img { width:260px }
    .hero-cards-grid { grid-template-columns:1fr 1fr 1fr; gap:10px }
    .tables-grid.two-cols { grid-template-columns:1fr }
    .tables-grid.three-cols { grid-template-columns:1fr 1fr }
    .tables-grid.main-quad { grid-template-columns:1fr 1fr; gap:14px }
    .calc-grid { grid-template-columns:1fr }
    .darphane-cards-grid { grid-template-columns:repeat(2, 1fr) }
}

/* ---- 1024px: tablets portrait / mobile menu ---- */
@media (max-width:1024px) {
    :root { --header-h: 70px }
    .header-logo-img { height:48px }
    .header-nav { 
        display:none; 
        position:fixed; 
        top:var(--header-h); 
        left:0; right:0; 
        background:var(--bg-card-solid); 
        border-bottom:1px solid var(--border); 
        flex-direction:column; 
        padding:16px 20px; 
        gap:4px; 
        box-shadow:var(--sh-lg); 
        z-index:998; 
        transform:none;
        border-radius:0;
        max-height:calc(100vh - var(--header-h));
        overflow-y:auto
    }
    .header-nav.active { display:flex }
    .nav-link { padding:14px 16px; border-radius:var(--r-md); justify-content:flex-start; font-size:.88rem }
    .nav-link svg { opacity:1; width:16px; height:16px }
    .mobile-menu-toggle { display:flex }
    .digital-clock { display:none }
    .icon-btn { width:38px; height:38px }
}

/* ---- 900px: single column tables ---- */
@media (max-width:900px) {
    .tables-grid.three-cols { grid-template-columns:1fr }
    .tables-grid.main-quad { grid-template-columns:1fr }
    .hero-cards-grid { grid-template-columns:1fr 1fr }
}

/* ---- 768px: tablet/phablet tweaks ---- */
@media (max-width:768px) {
    :root { --header-h: 64px; --safe-padding: 14px }
    .header-logo-img { height:44px }
    .hero-section { padding:28px 0 20px }
    .hero-logo-anim { width:260px; height:200px }
    .hero-logo-img { width:210px }
    .hero-stat-card { padding:16px 18px; gap:14px }
    .hsc-icon { width:42px; height:42px }
    .hsc-icon svg { width:22px; height:22px }
.hsc-icon i { font-size:18px }
    .hsc-value { font-size:1.35rem }
    .hsc-label { font-size:.72rem; letter-spacing:.8px }
    .card-header { padding:14px 16px }
    .card-title { font-size:.95rem }
    .card-icon { width:34px; height:34px }
    .card-icon svg { width:18px; height:18px }
    .chart-body { padding:18px }
    .chart-current-price { font-size:1.6rem }
    .chart-select { min-width:100px; font-size:.8rem; padding:7px 28px 7px 12px }
    .chart-tab { padding:6px 12px; font-size:.8rem }
    .dc-card-body { padding:10px 14px 12px }
    .dc-card-header { padding:12px 14px 8px }
}

/* ---- 640px: mobile ---- */
@media (max-width:640px) {
    :root { --header-h: 58px; --ticker-h: 42px; --safe-padding: 10px }
    html { font-size:15.5px }
    .header-logo-img { height:38px }
    .icon-btn { width:36px; height:36px }
    .icon-btn svg { width:16px; height:16px }
    .header-tools { gap:4px }
    
    /* Hero */
    .hero-section { padding:14px 0 10px }
    .hero-section h1 { font-size:1.6rem }
    .hero-logo-anim { width:240px; height:180px }
    .hero-logo-img { width:200px }
    .hero-logo-ring { inset:-10px }
    .hero-stat-card { padding:14px 14px; gap:12px }
    .hsc-icon { width:40px; height:40px }
    .hsc-icon svg { width:20px; height:20px }
    .hsc-value { font-size:1.25rem }
    .hsc-label { font-size:.74rem; letter-spacing:.5px }
    .hsc-unit { font-size:.7rem }
    .hero-actions { flex-direction:column }
    .hero-btn { justify-content:center }
    .hero-update-bar { font-size:.72rem; padding:8px 14px; margin-top:10px }
    .hub-badge { font-size:.58rem; padding:2px 8px }
    
    /* Cards & Lists */
    .card-header { padding:12px 14px; gap:8px }
    .card-title { font-size:.88rem }
    .card-badge-live { font-size:.62rem; padding:3px 8px }
    .cl-item { padding:10px 12px; gap:6px }
    .cl-name { font-size:.86rem }
    .cl-col-val { font-size:.84rem }
    .cl-col-lbl { font-size:.62rem }
    .cl-price-col { padding:3px 8px }
    .cl-change { font-size:.64rem; padding:2px 6px }
    
    /* Darphane */
    .darphane-cards-grid { grid-template-columns:1fr; padding:12px; gap:14px }
    .dc-price-val { font-size:.82rem }
    .dc-price-label { font-size:.6rem }
    .dc-card-name { font-size:.86rem }
    
    /* Chart */
    .chart-current-price { font-size:1.3rem }
    .chart-canvas { height:200px }
    .chart-body { padding:14px }
    .chart-info { gap:10px }
    .card-tools { gap:8px }
    .chart-select { min-width:90px; font-size:.78rem; padding:6px 26px 6px 10px }
    .chart-tab { padding:5px 10px; font-size:.76rem }
    
    /* Update strip */
    .update-strip-inner { flex-wrap:wrap; justify-content:center; text-align:center; padding:10px 16px; font-size:.8rem }
    
    /* Tables */
    .data-table th, .data-table td { padding:10px 12px; font-size:.78rem }
    
    /* Footer */
    .footer-inner { padding:28px var(--safe-padding) 18px }
    .ft-top { gap:16px }
    .ft-contact { flex-direction:column; gap:10px }
    .ft-contact-item { white-space:normal }
    .ft-bottom { flex-direction:column; align-items:flex-start; gap:8px }

    /* Ticker */
    .ticker-item { padding:0 18px; gap:8px }
    .ticker-name { font-size:.7rem }
    .ticker-value { font-size:.78rem }
    .ticker-change { font-size:.68rem; padding:2px 6px }
    
    /* Toast */
    .toast-container { bottom:16px; right:12px; left:12px }
    .toast { min-width:auto; font-size:.85rem; padding:12px 16px }
    
    /* Scroll top */
    .scroll-top-btn { bottom:16px; right:12px; width:40px; height:40px }
}

/* ---- 420px: very small phones ---- */
@media (max-width:420px) {
    :root { --safe-padding: 8px }
    html { font-size:15px }
    .header-logo-img { height:34px }
    .hero-logo-anim { width:200px; height:150px }
    .hero-logo-img { width:160px }
    .hero-stat-card { padding:12px; gap:10px }
    .hsc-icon { width:36px; height:36px }
    .hsc-icon svg { width:18px; height:18px }
    .hsc-value { font-size:1.05rem }
    .cl-item { padding:8px 10px }
    .cl-name { font-size:.76rem }
    .cl-col-val { font-size:.74rem }
    .cl-price-col { padding:2px 6px }
    .card-header { padding:10px 12px }
    .card-title { font-size:.82rem }
    .dc-price-val { font-size:.76rem }
    .chart-current-price { font-size:1.15rem }
    .chart-price-change { font-size:.78rem; padding:4px 10px }
    .modal-header { padding:14px 12px }
    .modal-title { font-size:.95rem }
    .modal-body { padding:12px }
    .calc-input { font-size:.9rem; padding:10px 0 }
    .calc-select { font-size:.85rem; padding:10px 12px }
    .calc-btn { padding:12px; font-size:.88rem }
    .cri-label { font-size:.82rem }
    .cri-value { font-size:.92rem }
}

/* ---- 360px: absolute minimum phones ---- */
@media (max-width:360px) {
    :root { --safe-padding: 6px }
    .hero-logo-anim { width:180px; height:140px }
    .hero-logo-img { width:140px }
    .hsc-value { font-size:.95rem }
    .hsc-icon { width:32px; height:32px }
    .cl-name { font-size:.72rem }
    .cl-col-val { font-size:.7rem }
    .cl-price-col { padding:2px 5px }
    .dc-price-val { font-size:.72rem }
    .dc-row-label { font-size:.56rem; padding:2px 6px; min-width:32px }
}

/* ============================================
   CURRENCY SWITCHER BUTTON
   ============================================ */
.currency-label { font-family:var(--fm); font-size:17px; font-weight:900; color:var(--gold); line-height:1; transition:all .25s var(--ease) }
#currency-btn { position:relative; border:1px solid var(--border-g) !important }
#currency-btn:hover { border-color:var(--gold) !important; background:var(--gold-glow) !important }
#currency-btn:hover .currency-label { transform:scale(1.15); text-shadow:0 0 10px rgba(201,162,39,0.6) }

/* ============================================
   PRICE FLASH ANIMATION (value change)
   ============================================ */
@keyframes flashUpAnim {
    0% { background:rgba(34,197,94,0.3); color:#22c55e }
    100% { background:transparent; color:inherit }
}
@keyframes flashDownAnim {
    0% { background:rgba(239,68,68,0.3); color:#ef4444 }
    100% { background:transparent; color:inherit }
}
.flash-up { animation:flashUpAnim 1.2s ease-out forwards; border-radius:4px }
.flash-down { animation:flashDownAnim 1.2s ease-out forwards; border-radius:4px }

/* Son güncelleme zamanı */
#last-update-time { color:var(--gold); font-family:var(--fm); font-weight:700 }

/* ============================================
   CUSTOM CONTEXT MENU
   ============================================ */
.ctx-menu {
    position:fixed; z-index:99999;
    min-width:220px; max-width:280px;
    background:var(--bg-card-solid);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(201,162,39,0.06);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    padding:6px;
    opacity:0; visibility:hidden;
    transform:scale(0.92) translateY(-4px);
    transform-origin:top left;
    transition:opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
    font-family:var(--f1);
    overflow:hidden
}
.ctx-menu.visible { opacity:1; visibility:visible; transform:scale(1) translateY(0) }

.ctx-menu-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 14px;
    font-size:.82rem; font-weight:500;
    color:var(--text-1);
    background:transparent;
    border:none; border-radius:var(--r-md);
    cursor:pointer;
    width:100%;
    text-align:left;
    transition:all .15s var(--ease);
    position:relative;
    overflow:hidden
}
.ctx-menu-item:hover { background:var(--gold-glow); color:var(--gold) }
.ctx-menu-item:active { transform:scale(0.97) }
.ctx-menu-item i { width:18px; text-align:center; font-size:14px; color:var(--gold); transition:color .15s }
.ctx-menu-item:hover i { color:#fff }
.ctx-menu-item kbd { margin-left:auto; font-size:.62rem; font-weight:600; color:var(--text-3); background:var(--bg-input); padding:2px 6px; border-radius:4px; border:1px solid var(--border); font-family:var(--fm); letter-spacing:.3px }

.ctx-divider { height:1px; background:var(--border); margin:4px 8px }

.ctx-header { padding:8px 14px 4px; font-size:.65rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; pointer-events:none }

/* Light mode tweaks */
[data-theme="light"] .ctx-menu { box-shadow:0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) }

/* ============================================
   PRINT TEMPLATE (hidden on screen)
   ============================================ */
.print-template { display:none }

@media print {
    @page { size:A4 landscape; margin:10mm 14mm }

    body > *:not(.print-template) { display:none !important }
    .print-template {
        display:block !important;
        position:static !important;
        width:100% !important;
        color:#1a1a2e !important;
        background:#fff !important;
        font-family:'Inter', 'Segoe UI', sans-serif;
        font-size:10pt;
        line-height:1.4;
    }

    .pt-header {
        display:flex; align-items:flex-end; justify-content:space-between;
        border-bottom:3px solid #c9a227;
        padding-bottom:10px; margin-bottom:8px;
    }
    .pt-header-left { display:flex; flex-direction:column }
    .pt-header-right { text-align:right }
    .pt-title { font-size:16pt; font-weight:900; color:#1a1a2e; letter-spacing:1px }
    .pt-subtitle { font-size:8pt; color:#666; margin-top:2px; letter-spacing:.5px }
    .pt-date-main { font-size:11pt; font-weight:800; color:#c9a227 }
    .pt-date-sub { font-size:8pt; color:#555; margin-top:1px }
    .pt-date-tag { font-size:7pt; color:#fff; background:#c9a227; padding:2px 8px; border-radius:3px; margin-top:4px; display:inline-block; font-weight:700; letter-spacing:.5px }

    .pt-hero-strip {
        display:flex; gap:0; margin-bottom:10px;
        border:1px solid #ddd; border-radius:6px; overflow:hidden;
        background:#fafaf8;
    }
    .pt-hero-item {
        flex:1; display:flex; flex-direction:column; align-items:center;
        padding:6px 4px; border-right:1px solid #eee;
    }
    .pt-hero-item:last-child { border-right:none }
    .pt-hero-label { font-size:6pt; color:#888; text-transform:uppercase; font-weight:700; letter-spacing:.5px }
    .pt-hero-value { font-size:10pt; font-weight:800; color:#1a1a2e; font-family:'JetBrains Mono', monospace }
    .pt-hero-change { font-size:6pt; font-weight:700; color:#10b981 }

    .pt-grid-3 {
        display:grid; grid-template-columns:1fr 1fr 1fr;
        gap:8px; margin-bottom:8px;
    }
    .pt-col { display:flex; flex-direction:column; gap:8px }

    .pt-section {
        border:1px solid #ddd; border-radius:6px;
        overflow:hidden; page-break-inside:avoid;
    }
    .pt-section-title {
        background:linear-gradient(135deg, #c9a227 0%, #e3be6d 100%);
        color:#fff;
        font-size:8pt; font-weight:700;
        padding:5px 10px; text-transform:uppercase;
        letter-spacing:.5px;
        display:flex; align-items:center; gap:4px;
    }
    .pt-section-title-dark {
        background:linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
    }
    .pt-section-icon { font-size:9pt }

    .pt-table { width:100%; border-collapse:collapse; font-size:7.5pt }
    .pt-table th {
        background:#f5f5f5; font-weight:700; text-align:left;
        padding:4px 8px; border-bottom:1px solid #ddd;
        font-size:6.5pt; text-transform:uppercase; color:#666;
    }
    .pt-table td {
        padding:3px 8px; border-bottom:1px solid #f0f0f0;
        font-weight:500;
    }
    .pt-table tr.pt-alt td { background:#fafaf8 }
    .pt-table tr:last-child td { border-bottom:none }
    .pt-table .pt-price { font-weight:700; color:#1a1a2e; text-align:right; font-family:'JetBrains Mono', monospace; font-size:7.5pt }
    .pt-table .pt-sell { color:#c9a227 }
    .pt-change { font-size:6.5pt; text-align:right; font-weight:600; font-family:'JetBrains Mono', monospace }
    .pt-up { color:#10b981 }
    .pt-down { color:#ef4444 }

    .pt-darphane-section { margin-bottom:8px }
    .pt-darphane .pt-darphane-name {
        font-weight:700; font-size:8pt; color:#1a1a2e;
        vertical-align:middle; border-right:1px solid #eee;
        background:#fafaf8;
    }
    .pt-darphane .pt-darphane-yeni td { border-bottom:1px solid #f5f5f5 }
    .pt-darphane .pt-darphane-eski td { border-bottom:2px solid #e8e8e8 }
    .pt-badge-yeni { text-align:center; font-size:7pt; font-weight:800; color:#c9a227 }
    .pt-badge-eski { text-align:center; font-size:7pt; font-weight:700; color:#888 }

    .pt-footer {
        display:flex; justify-content:space-between; align-items:flex-end;
        border-top:2px solid #c9a227;
        padding-top:8px; margin-top:auto;
        font-size:7pt; color:#888;
    }
    .pt-footer-left { display:flex; flex-direction:column; gap:1px }
    .pt-footer-brand { font-weight:800; color:#c9a227; font-size:8pt; letter-spacing:.5px; margin-bottom:2px }
    .pt-footer-right { text-align:right; display:flex; flex-direction:column; gap:2px }
    .pt-footer-web { font-weight:700; color:#c9a227; font-size:8pt }
    .pt-footer-qr { font-size:6.5pt; color:#aaa }
    .pt-disclaimer { font-style:italic; font-size:6.5pt; color:#bbb; margin-top:6px; text-align:center; border-top:1px dashed #eee; padding-top:4px }
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important
    }
}

/* Focus-visible for keyboard navigation */
*:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:2px;
    border-radius:var(--r-sm)
}

/* ============================================
   MOBILE BOTTOM NAV (hidden on desktop)
   ============================================ */
.mobile-bottom-nav { display:none }

/* ============================================
   MOBILE FLOATING BUTTONS (hidden on desktop)
   ============================================ */
.mobile-float-btns { display:none }

/* Visually hidden (accessible label) */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ============================================
   MOBILE-ONLY STYLES (≤768px)
   ============================================ */
@media (max-width:768px) {
    /* Hide desktop nav and specific buttons on mobile */
    .header-nav { display:none !important }
    .mobile-menu-toggle { display:none !important }
    .hide-mobile { display:none !important }

    /* Header: logo left, tools right — BIGGER */
    :root { --header-h: 80px }
    .header-container { justify-content:space-between; padding:0 12px }
    .header-logo-center { order:-1; position:static; transform:none; margin:0 }
    .header-logo-img { height:52px }
    .icon-btn { width:46px; height:46px; min-width:46px; min-height:46px; font-size:18px }
    .icon-btn svg { width:20px; height:20px }
    .currency-label { font-size:19px }

    /* Body padding for bottom nav */
    body { padding-bottom:72px }
    .site-footer { margin-bottom:0 }

    /* ---- Mobile Bottom Nav ---- */
    .mobile-bottom-nav {
        display:flex;
        position:fixed;
        bottom:0; left:0; right:0;
        height:68px;
        background:var(--bg-card-solid);
        border-top:1px solid var(--border);
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px);
        z-index:1000;
        align-items:center;
        justify-content:space-around;
        padding:0 4px;
        box-shadow:0 -4px 20px rgba(0,0,0,0.08)
    }
    .mbn-link {
        display:flex; flex-direction:column; align-items:center; gap:4px;
        color:var(--text-2); text-decoration:none; font-size:.60rem; font-weight:700;
        padding:8px 6px; border-radius:var(--r-md); transition:all .2s var(--ease);
        letter-spacing:.3px; text-transform:uppercase; position:relative;
        -webkit-tap-highlight-color:transparent; touch-action:manipulation
    }
    .mbn-link i { font-size:20px; transition:transform .2s var(--ease) }
    .mbn-link span { line-height:1 }
    .mbn-link.active { color:var(--gold) }
    .mbn-link.active i { transform:scale(1.15) }
    .mbn-link.active::after {
        content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
        width:20px; height:3px; background:var(--gold-g); border-radius:0 0 3px 3px
    }
    .mbn-link:hover, .mbn-link:active { color:var(--gold) }

    /* Hesapla button special styling */
    .mbn-hesapla { color:var(--gold) }
    .mbn-hesapla i { background:var(--gold-glow); border-radius:var(--r-md); padding:4px; font-size:18px }

    /* ---- Mobile Floating WhatsApp / Phone ---- */
    .mobile-float-btns {
        display:flex; flex-direction:column; gap:10px;
        position:fixed; left:14px; bottom:88px; z-index:999
    }
    .float-btn {
        width:48px; height:48px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:20px; text-decoration:none;
        box-shadow:0 4px 16px rgba(0,0,0,0.2);
        transition:all .3s var(--ease);
        animation:floatPulse 3s ease-in-out infinite;
        -webkit-tap-highlight-color:transparent
    }
    .float-btn.whatsapp { background:#25d366; animation-delay:0s }
    .float-btn.phone { background:var(--gold); animation-delay:.5s }
    .float-btn:hover { transform:scale(1.12); box-shadow:0 6px 24px rgba(0,0,0,0.3) }

    @keyframes floatPulse {
        0%, 100% { transform:translateY(0) }
        50% { transform:translateY(-4px) }
    }

    /* Scroll-top button adjusts for bottom nav */
    .scroll-top-btn { bottom:88px; right:14px }

    /* Footer: Solid Medya centered on mobile */
    .ft-bottom { flex-direction:column; align-items:center; text-align:center; gap:6px }
    .footer-solid-medya { order:0; width:100%; text-align:center; font-size:.78rem; margin-top:4px }
}

/* ============================================
/* ============================================
   MOBIL UYGULAMA BOLUMU - v2
   ============================================ */
.app-section { padding:40px var(--safe-padding); max-width:var(--content-max); margin:0 auto }
.app-section-inner {
    display:flex; align-items:center; gap:56px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r-xl); padding:48px; position:relative; overflow:hidden
}
.app-section-inner::before {
    content:''; position:absolute; top:-100px; right:-100px; width:350px; height:350px;
    background:radial-gradient(circle, var(--gold-glow2) 0%, transparent 70%); pointer-events:none; z-index:0
}
.app-section-inner::after {
    content:''; position:absolute; bottom:-80px; left:-80px; width:250px; height:250px;
    background:radial-gradient(circle, rgba(59,130,246,.05) 0%, transparent 70%); pointer-events:none; z-index:0
}
.app-left { flex:1; z-index:1; min-width:0 }
.app-right { flex:0 0 240px; z-index:1; position:relative }
/* Badge */
.app-badge-wrap { display:flex; align-items:center; gap:8px; margin-bottom:20px }
.app-badge {
    display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
    background:var(--gold-glow); border:1px solid var(--border-g); border-radius:var(--r-full);
    font-size:.78rem; font-weight:700; color:var(--gold); letter-spacing:.5px
}
.app-badge i { font-size:12px }
.app-badge-new {
    display:inline-flex; padding:3px 10px; background:var(--green); color:#fff;
    border-radius:var(--r-full); font-size:.65rem; font-weight:800; letter-spacing:1px
}
/* Heading */
.app-heading { font-size:2.2rem; font-weight:800; color:var(--text-1); margin:0 0 12px; line-height:1.2; letter-spacing:-.5px }
.app-heading-gold { background:var(--gold-g); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.app-subtext { font-size:1rem; color:var(--text-2); line-height:1.6; margin:0 0 28px; max-width:480px }
/* Features Grid */
.app-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px }
.app-feat {
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md);
    transition:all .2s var(--ease)
}
.app-feat:hover { border-color:var(--border-g); transform:translateY(-1px) }
.app-feat-icon {
    width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    background:var(--gold-glow); color:var(--gold); font-size:14px; flex-shrink:0
}
.app-feat-icon.bell { background:rgba(59,130,246,.08); color:var(--blue) }
.app-feat-icon.shield { background:rgba(16,185,129,.08); color:var(--green) }
.app-feat-icon.wifi { background:rgba(139,92,246,.08); color:var(--purple) }
.app-feat-info { display:flex; flex-direction:column; gap:1px }
.app-feat-info strong { font-size:.82rem; color:var(--text-1); font-weight:700 }
.app-feat-info span { font-size:.72rem; color:var(--text-3) }
/* Buttons */
.app-buttons { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap }
.app-btn {
    display:flex; align-items:center; gap:14px; padding:14px 22px; border-radius:var(--r-lg);
    text-decoration:none; font-family:inherit; border:none; cursor:pointer;
    transition:all .3s var(--ease); min-width:190px; position:relative; overflow:hidden
}
.app-btn::after {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    transition:left .5s var(--ease)
}
.app-btn:hover::after { left:100% }
.app-btn-android { background:linear-gradient(135deg, #3DDC84 0%, #2E9E5E 100%); color:#fff; box-shadow:0 4px 20px rgba(61,220,132,.2) }
.app-btn-android:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(61,220,132,.3) }
.app-btn-ios { background:var(--bg-input); color:var(--text-1); border:1px solid var(--border); box-shadow:var(--sh-sm) }
.app-btn-ios:hover { border-color:var(--border-g); transform:translateY(-2px); box-shadow:var(--sh-md) }
.app-btn-os { font-size:24px; flex-shrink:0 }
.app-btn-label { display:flex; flex-direction:column; gap:1px; text-align:left }
.app-btn-sm { font-size:.68rem; font-weight:500; opacity:.8; text-transform:uppercase; letter-spacing:.5px }
.app-btn-lg { font-size:1.05rem; font-weight:800; letter-spacing:-.2px }
.app-btn-lg small { font-weight:500; opacity:.7; font-size:.75rem }
.app-btn-act { margin-left:auto; font-size:14px; opacity:.6 }
/* Install Accordion */
.app-note {
    border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
    max-width:480px; transition:all .3s var(--ease)
}
.app-note-header {
    display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer;
    font-size:.82rem; font-weight:600; color:var(--text-2); background:var(--bg-input);
    transition:all .2s var(--ease); -webkit-user-select:none; user-select:none
}
.app-note-header:hover { color:var(--gold) }
.app-note-header i:first-child { color:var(--gold); font-size:14px }
.app-note-chevron { margin-left:auto; font-size:10px; transition:transform .3s var(--ease) }
.app-note.expanded .app-note-chevron { transform:rotate(180deg) }
.app-note-body {
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease);
    padding:0 14px; background:var(--bg-card)
}
.app-note.expanded .app-note-body { max-height:200px; padding:12px 14px }
.app-steps { margin:0; padding-left:18px; font-size:.82rem; color:var(--text-2); line-height:1.9 }
.app-steps strong { color:var(--text-1) }
/* Phone Mockup */
.app-phone {
    width:210px; height:420px; background:var(--bg-card-solid); border-radius:32px;
    border:3px solid var(--border); padding:6px; position:relative;
    box-shadow:var(--sh-lg), 0 0 0 1px var(--border); margin:0 auto
}
.app-phone-notch {
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:70px; height:22px; background:var(--bg-card-solid); border-radius:0 0 14px 14px;
    z-index:2; border:1px solid var(--border); border-top:none
}
.app-phone-inner {
    width:100%; height:100%; background:var(--bg-body); border-radius:28px;
    display:flex; flex-direction:column; overflow:hidden; position:relative
}
.app-phone-status {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 16px 4px; font-size:10px; font-weight:700; color:var(--text-2); z-index:3
}
.app-phone-status-icons { display:flex; gap:4px; align-items:center; color:var(--text-2) }
.app-phone-content {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:8px 14px; gap:6px
}
.app-phone-app-logo { width:72px; height:auto; filter:drop-shadow(0 2px 8px rgba(201,162,39,.2)) }
.app-phone-app-name { font-size:.92rem; font-weight:800; color:var(--gold); letter-spacing:.3px }
.app-phone-app-sub { font-size:.58rem; font-weight:700; color:var(--text-3); letter-spacing:2px; text-transform:uppercase }
.app-phone-divider { width:40px; height:1px; background:var(--border); margin:8px 0 }
.app-phone-cards { display:flex; flex-direction:column; gap:6px; width:100% }
.app-phone-card {
    display:flex; align-items:center; justify-content:space-between; padding:8px 10px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-sm); font-size:.7rem
}
.app-phone-card.gld { border-left:2px solid var(--gold) }
.app-phone-card.blu { border-left:2px solid var(--blue) }
.apc-label { color:var(--text-2); font-weight:600 }
.apc-value { color:var(--text-1); font-weight:800; font-family:var(--fm); font-size:.72rem }
.apc-change { font-size:.6rem; font-weight:700 }
.apc-change.up { color:var(--green) }
.app-phone-home-bar {
    width:100px; height:4px; background:var(--text-3); border-radius:2px;
    margin:6px auto 8px; opacity:.4
}
/* Deco */
.app-deco-dot {
    position:absolute; border-radius:50%; pointer-events:none;
    animation:appFloat 4s ease-in-out infinite
}
.app-deco-1 { width:10px; height:10px; background:var(--gold); top:-10px; right:20px; opacity:.4 }
.app-deco-2 { width:6px; height:6px; background:var(--blue); bottom:20px; left:-10px; opacity:.3; animation-delay:1.5s }
.app-deco-ring {
    position:absolute; width:80px; height:80px; border:2px solid var(--border-g); border-radius:50%;
    top:50%; right:-30px; transform:translateY(-50%); opacity:.15; pointer-events:none
}
@keyframes appFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
/* iOS Modal */
.ios-info-modal { max-width:520px }
.ios-info-block {
    display:flex; gap:14px; padding:16px; margin-bottom:12px;
    background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md)
}
.ios-info-icon {
    width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    background:rgba(59,130,246,.1); color:#3b82f6; font-size:18px; flex-shrink:0
}
.ios-info-icon.warn { background:rgba(245,158,11,.1); color:var(--amber) }
.ios-info-icon.tip { background:rgba(16,185,129,.1); color:var(--green) }
.ios-pwa-steps {
    display:flex; flex-direction:column; gap:6px; margin-top:10px;
    padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-sm)
}
.ios-pwa-steps span {
    display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-2); font-weight:500
}
.ios-pwa-steps i { color:var(--gold); font-size:13px; width:18px; text-align:center }
/* Responsive */
@media (max-width:768px) {
    .app-section-inner { flex-direction:column; padding:28px 20px; gap:28px; text-align:center }
    .app-right { flex:none }
    .app-heading { font-size:1.6rem }
    .app-subtext { max-width:100% }
    .app-feat-grid { grid-template-columns:1fr }
    .app-buttons { flex-direction:column; align-items:stretch }
    .app-btn { justify-content:center; min-width:auto }
    .app-note { max-width:100%; text-align:left }
    .app-phone { width:170px; height:340px }
    .app-deco-ring, .app-deco-dot { display:none }
}