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

      :root {
        --navy: #0f1f4e;
        --blue: #1d4ed8;
        --blue-lt: #3b82f6;
        --bg: #f4f6fb;
        --surface: #ffffff;
        --border: #e2e8f4;
        --text: #1a2540;
        --muted: #5a6a8a;
        --radius: 10px;
      }

      body {
        font-family:
          system-ui,
          -apple-system,
          "Segoe UI",
          sans-serif;
        background: var(--bg);
        color: var(--text);
        font-size: 15px;
        line-height: 1.6;
      }

      /* ── NAV ── */
      .nav {
        background: var(--navy);
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
      }
      .nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
      }
      .logo {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: -0.3px;
      }
      .logo span {
        color: var(--blue-lt);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
      }
      .nav-links a {
        color: #c8d4ef;
        font-size: 0.8rem;
        text-decoration: none;
        padding: 6px 9px;
        border-radius: 6px;
        transition:
          background 0.15s,
          color 0.15s;
        white-space: nowrap;
      }
      .nav-links a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }
      .nav-links a.active {
        background: var(--blue);
        color: #fff;
      }

      .hamburger {
        display: none;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.25rem;
        cursor: pointer;
        padding: 6px;
      }
      .mob-menu {
        display: none;
        background: #162040;
        padding: 8px 0;
      }
      .mob-menu a {
        display: block;
        color: #c8d4ef;
        text-decoration: none;
        padding: 10px 24px;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .mob-menu a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
      }
      .mob-menu.open {
        display: block;
      }

      /* ── HERO ── */
      .hero {
        background: linear-gradient(
          135deg,
          #0f1f4e 0%,
          #1d3a8a 60%,
          #1a5fd4 100%
        );
        padding: 52px 20px 44px;
        text-align: center;
        color: #fff;
      }
      .hero-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 4px 14px;
        color: #a5c0f5;
        margin-bottom: 16px;
      }
      .hero h1 {
        font-size: clamp(1.6rem, 4vw, 2.6rem);
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.2;
        margin-bottom: 12px;
      }
      .hero h1 span {
        color: #60a5fa;
      }
      .hero p {
        color: #adc4ef;
        font-size: 1rem;
        max-width: 540px;
        margin: 0 auto 28px;
      }

      /* ── KATEGORİ KARTları (hero içi) ── */
      .cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        max-width: 900px;
        margin: 0 auto;
      }
      .cat-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 14px 8px;
        color: #fff;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 600;
        transition:
          background 0.2s,
          transform 0.15s;
      }
      .cat-card:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
      }
      .cat-card i {
        font-size: 1.3rem;
      }
      .cat-card.c-ulusal i {
        color: #93c5fd;
      }
      .cat-card.c-yerel i {
        color: #6ee7b7;
      }
      .cat-card.c-yabanci i {
        color: #fca5a5;
      }
      .cat-card.c-online i {
        color: #c4b5fd;
      }
      .cat-card.c-kultur i {
        color: #fcd34d;
      }
      .cat-card.c-ekonomi i {
        color: #67e8f9;
      }
      .cat-card.c-cevre i {
        color: #86efac;
      }
      .cat-card.c-bilim i {
        color: #d8b4fe;
      }
      .cat-card.c-spor i {
        color: #fda4af;
      }
      .cat-card.c-saglik i {
        color: #a5f3fc;
      }
      .cat-card.c-magazin i {
        color: #fbcfe8;
      }

      /* ── STAT SERIT ── */
      .stat-serit {
        background: var(--navy);
        color: #fff;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
      }
      .stat-item {
        padding: 14px 32px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-n {
        font-size: 1.5rem;
        font-weight: 800;
        color: #60a5fa;
        line-height: 1;
      }
      .stat-l {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #7a97cc;
        margin-top: 2px;
      }

      /* ── NEDEN BÖLÜMÜ ── */
      .neden {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px 0;
      }
      .neden-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
      }
      .neden-kart {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .neden-ikon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.1rem;
      }
      .neden-kart:nth-child(1) .neden-ikon {
        background: #eff6ff;
        color: var(--blue);
      }
      .neden-kart:nth-child(2) .neden-ikon {
        background: #f0fdf4;
        color: #16a34a;
      }
      .neden-kart:nth-child(3) .neden-ikon {
        background: #fff7ed;
        color: #ea580c;
      }
      .neden-icerik h3 {
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 4px;
      }
      .neden-icerik p {
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.5;
      }

      /* ── ANA İÇERİK ── */
      .main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 20px 60px;
      }

      .section {
        margin-bottom: 36px;
      }
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border);
      }
      .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text);
      }
      .section-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .see-all {
        font-size: 0.78rem;
        color: var(--blue);
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
      }
      .see-all:hover {
        text-decoration: underline;
      }

      /* ── GAZETE KARTLARI ── */
      .gazete-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
      }
      .gazete-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text);
        transition:
          border-color 0.15s,
          box-shadow 0.15s,
          transform 0.15s;
        border-left-width: 3px;
      }
      .gazete-btn:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
        transform: translateY(-1px);
      }
      .gazete-btn i {
        font-size: 0.85rem;
        flex-shrink: 0;
      }

      /* Renk şeritleri */
      .ulusal {
        border-left-color: #1e3a8a;
      }
      .ulusal i {
        color: #1e3a8a;
      }
      .yerel {
        border-left-color: #047857;
      }
      .yerel i {
        color: #047857;
      }
      .yabanci {
        border-left-color: #b91c1c;
      }
      .yabanci i {
        color: #b91c1c;
      }
      .online {
        border-left-color: #6d28d9;
      }
      .online i {
        color: #6d28d9;
      }
      .kultur {
        border-left-color: #b45309;
      }
      .kultur i {
        color: #b45309;
      }
      .ekonomi {
        border-left-color: #0e7490;
      }
      .ekonomi i {
        color: #0e7490;
      }
      .cevre {
        border-left-color: #3d6b0a;
      }
      .cevre i {
        color: #3d6b0a;
      }
      .bilim {
        border-left-color: #6d28d9;
      }
      .bilim i {
        color: #6d28d9;
      }
      .spor {
        border-left-color: #be123c;
      }
      .spor i {
        color: #be123c;
      }
      .saglik {
        border-left-color: #7c3aed;
      }
      .saglik i {
        color: #7c3aed;
      }
      .magazin {
        border-left-color: #db2777;
      }
      .magazin i {
        color: #db2777;
      }

      /* ── FOOTER ── */
      footer {
        background: var(--navy);
        color: #8fa8cf;
        padding: 40px 20px 24px;
      }
      .footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
      }
      footer h4 {
        color: #fff;
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 12px;
      }
      footer p {
        font-size: 0.82rem;
        line-height: 1.6;
      }
      footer a {
        color: #8fa8cf;
        text-decoration: none;
        display: block;
        font-size: 0.82rem;
        margin-bottom: 6px;
      }
      footer a:hover {
        color: #60a5fa;
      }
      .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        color: #8fa8cf;
        text-decoration: none;
        margin-right: 6px;
        margin-bottom: 0;
        font-size: 1rem;
        transition:
          background 0.15s,
          color 0.15s;
      }
      .footer-social a:hover {
        background: var(--blue);
        color: #fff;
      }
      .footer-bottom {
        max-width: 1200px;
        margin: 28px auto 0;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        font-size: 0.78rem;
        color: #5a78aa;
      }
      .footer-bottom a {
        display: inline;
        margin: 0 8px;
        color: #5a78aa;
      }
      .footer-bottom a:hover {
        color: #60a5fa;
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 768px) {
        .nav-links {
          display: none;
        }
        .hamburger {
          display: block;
        }
        .footer-inner {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .cat-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .stat-item {
          padding: 12px 20px;
        }
      }
      @media (max-width: 480px) {
        .cat-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .gazete-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    
/* SSS */
.sss{max-width:1200px;margin:0 auto 40px;padding:0 16px}
.sss h2{font-size:1.4rem;margin-bottom:16px}
.sss details{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;background:#fff}
.sss summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none}
.sss summary::after{content:'+';float:right;color:#3b82f6;font-size:1.2rem}
.sss details[open] summary::after{content:'−'}
.sss details p{padding:0 16px 14px;color:#6b7280}

@media(max-width:600px){
  .dk-oge{padding:8px 16px;font-size:12px}
  .dk-gologe{padding:8px 14px;font-size:12px}
  
  }

      /* Süper Lig ana sayfa widget'ı */
      .sl-uyari{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:.78rem;color:#78350f}
      .sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:14px}
      .sl-mac{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.82rem}
      .sl-mac a{color:var(--text);text-decoration:none;font-weight:700}
      .sl-mac a:hover{color:var(--blue)}
      .sl-vs{color:var(--muted);font-size:.68rem;font-weight:800}
      .sl-derbi{display:inline-block;background:#fef2f2;color:#b91c1c;font-size:.6rem;font-weight:800;text-transform:uppercase;padding:1px 6px;border-radius:999px;margin-left:5px}
      .sl-tablo-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);position:relative;-webkit-overflow-scrolling:touch}
      table.sl-tablo{width:100%;border-collapse:collapse;font-size:.8rem;min-width:480px}
      table.sl-tablo th{background:var(--navy);color:#fff;padding:8px 6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;text-align:center}
      table.sl-tablo th:nth-child(2){text-align:left}
      table.sl-tablo td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--border)}
      table.sl-tablo td:nth-child(2){text-align:left;font-weight:700}
      table.sl-tablo td:nth-child(2) a{color:var(--text);text-decoration:none}
      table.sl-tablo td:nth-child(2) a:hover{color:var(--blue);text-decoration:underline}
      table.sl-tablo tr:last-child td{border-bottom:none}
      .sl-kaydir-ipucu{display:none;align-items:center;justify-content:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--blue);background:#eff6ff;padding:6px 10px;border-radius:8px 8px 0 0;border-bottom:1px solid var(--border)}
      @media(max-width:600px){
        table.sl-tablo{min-width:0;width:100%;font-size:.76rem}
        table.sl-tablo th{padding:7px 4px;font-size:.62rem}
        table.sl-tablo td{padding:7px 4px}
        table.sl-tablo th:nth-child(3), table.sl-tablo td:nth-child(3),
        table.sl-tablo th:nth-child(4), table.sl-tablo td:nth-child(4),
        table.sl-tablo th:nth-child(5), table.sl-tablo td:nth-child(5),
        table.sl-tablo th:nth-child(6), table.sl-tablo td:nth-child(6){display:none}
        table.sl-tablo th:last-child, table.sl-tablo td:last-child{font-weight:800}
        .sl-kaydir-ipucu{display:none}
        .sl-tablo-wrap::after{display:none}
      }
      @media(max-width:360px){
        table.sl-tablo{font-size:.7rem}
      }
.makale-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.makale-kart{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 22px 22px;display:flex;flex-direction:column;overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.makale-kart::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ek-renk,var(--blue)),color-mix(in srgb,var(--ek-renk,var(--blue)) 40%,#fff))}
.makale-kart:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(15,31,78,.14)}
.makale-etiket{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ek-renk,var(--blue));background:color-mix(in srgb,var(--ek-renk,var(--blue)) 12%,#fff);padding:4px 11px;border-radius:999px;margin-bottom:12px}
.makale-etiket::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ek-renk,var(--blue))}
.makale-kart h3{font-size:1.06rem;font-weight:800;color:var(--text);margin-bottom:14px;line-height:1.38;transition:color .15s}
.makale-kart:hover h3{color:var(--ek-renk,var(--blue))}
.makale-byline{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.yazar-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--ek-renk,var(--blue));color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.makale-byline-metin{font-size:.72rem;color:var(--muted);line-height:1.4}
.makale-byline-metin .yazar-adi{display:block;font-weight:700;color:var(--blue);font-size:.78rem;margin-bottom:1px;text-decoration:none;transition:color .15s}
.makale-byline-metin .yazar-adi:hover{color:var(--navy);text-decoration:underline}
.makale-byline-metin .ayrac{color:#cbd5e1;margin:0 4px}
.makale-kart p{font-size:.86rem;color:var(--muted);line-height:1.7;margin-bottom:11px}
.makale-kart p:last-of-type{margin-bottom:0}
.makale-kart p:first-of-type::first-letter{font-size:1.9em;font-weight:800;color:var(--ek-renk,var(--blue));float:left;line-height:1;padding-right:4px;padding-top:2px}
@media(max-width:480px){.makale-grid{grid-template-columns:1fr}}
.altin-bar{background:linear-gradient(135deg,#78350f,#b45309);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.altin-baslik{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.altin-emoji{font-size:1.1rem}
.altin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.altin-kart{background:rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;text-align:center}
.altin-kart.gumus{background:rgba(148,163,184,.28)}
.altin-kart.bitcoin{background:rgba(234,88,12,.28)}
.altin-ad{font-size:.72rem;font-weight:700;color:#fde68a;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.altin-deger{font-size:1.15rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.altin-not{font-size:.68rem;color:#fde68a;margin-top:12px;line-height:1.5}
.piyasa-band-sarma{background:linear-gradient(135deg,#0f1f4e,#1d3a8a);overflow:hidden;position:relative;padding:10px 0;margin-bottom:0}
.piyasa-band-sarma::before,.piyasa-band-sarma::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.piyasa-band-sarma::before{left:0;background:linear-gradient(90deg,#0f1f4e,transparent)}
.piyasa-band-sarma::after{right:0;background:linear-gradient(270deg,#0f1f4e,transparent)}
.piyasa-band-track{display:flex;width:max-content;animation:piyasa-kaydir 220s linear infinite}
.piyasa-band-sarma:hover .piyasa-band-track{animation-play-state:paused}
@keyframes piyasa-kaydir{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.piyasa-ogesi{display:flex;align-items:center;gap:8px;padding:0 22px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12);text-decoration:none;cursor:pointer;transition:opacity .15s}
a.piyasa-ogesi:hover{opacity:.75}
.piyasa-ogesi img{width:20px;height:14px;object-fit:cover;border-radius:2px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.piyasa-ogesi .kod{font-size:.72rem;font-weight:800;color:#9fb3e8;letter-spacing:.03em}
.piyasa-ogesi .deger{font-size:.86rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.piyasa-ogesi .degisim{font-size:.7rem;font-weight:700}
.piyasa-ogesi .degisim.artis{color:#4ade80}
.piyasa-ogesi .degisim.dusus{color:#f87171}
.piyasa-ogesi .degisim.notr{color:#9fb3e8}
.piyasa-band-not{text-align:center;font-size:.65rem;color:#9fb3e8;padding:4px 12px 8px;background:#0f1f4e}
.tumligler-banner{display:flex;flex-direction:column;gap:14px;background:linear-gradient(135deg,#0f1f4e,#1d3a8a);border-radius:14px;padding:20px;text-decoration:none;margin-top:18px;transition:transform .15s,box-shadow .15s}
.tumligler-banner:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,31,78,.25)}
.tumligler-ust{display:flex;align-items:flex-start;gap:12px}
.tumligler-emoji{font-size:1.8rem;line-height:1;flex-shrink:0}
.tumligler-baslik{font-size:1.02rem;font-weight:800;color:#fff;margin-bottom:4px}
.tumligler-alt{font-size:.8rem;color:#c3d2f0;line-height:1.5}
.tumligler-bayraklar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tumligler-bayraklar img{width:24px;height:17px;object-fit:cover;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tumligler-arti{font-size:.72rem;font-weight:800;color:#c3d2f0;background:rgba(255,255,255,.12);border-radius:6px;padding:3px 8px}
.tumligler-cta{display:inline-block;align-self:flex-start;background:#fff;color:#0f1f4e;font-size:.82rem;font-weight:800;padding:9px 18px;border-radius:999px}
@media(max-width:480px){.tumligler-bayraklar img{width:20px;height:14px}.tumligler-baslik{font-size:.92rem}.tumligler-alt{font-size:.74rem}}
@media(max-width:600px){.piyasa-ogesi{padding:0 16px;gap:10px}.piyasa-ogesi img{width:26px;height:18px}.piyasa-ogesi .kod{font-size:.78rem}.piyasa-ogesi .deger{font-size:.92rem}}