:root{
      --bg:#0f172a; --bg-soft:#111827; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
      --brand:#3b82f6; --brand-2:#22d3ee; --accent:#f59e0b; --border:#1f2937; --success:#10b981; --danger:#ef4444;
    }
    :root.light{
      --bg:#f5f7fb; --bg-soft:#ffffff; --card:#ffffff; --text:#0f172a; --muted:#475569;
      --brand:#2563eb; --brand-2:#0891b2; --accent:#d97706; --border:#e5e7eb; --success:#059669; --danger:#dc2626;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
      background:linear-gradient(180deg,var(--bg),var(--bg-soft));color:var(--text);overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}

    /* Header */
    header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);
      background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(15,23,42,.65));border-bottom:1px solid var(--border)}
    :root.light header{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75))}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand{display:flex;align-items:center;gap:10px}
    .brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 24px rgba(0,0,0,.25)}
    .brand h1{font-size:18px;line-height:1;margin:0;font-weight:700}

    .menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
    .menu>a,.menu>.dropdown>a{padding:10px 12px;border-radius:10px;transition:.15s ease;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
    .menu>a:hover,.menu>.dropdown>a:hover{background:rgba(59,130,246,.15);color:var(--brand)}
    .dropdown{position:relative}
    .dropdown>a::after{content:"▾";font-size:12px;opacity:.8}
    .dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px;display:none;box-shadow:0 12px 28px rgba(0,0,0,.25);z-index:60}
    .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}
    .dropdown-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text)}
    .dropdown-menu a:hover{background:rgba(59,130,246,.12);color:var(--brand)}

    .actions{display:flex;align-items:center;gap:10px;margin-right:14px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:500;cursor:pointer}
    .btn:hover{filter:brightness(1.05)}
    .btn.icon-only{width:32px;height:32px;padding:0}

    /* Switch + tooltip */
    .switch{position:relative;width:54px;height:30px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--border);display:inline-flex;align-items:center;padding:2px;cursor:pointer}
    .switch .knob{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 12px rgba(0,0,0,.25);transform:translateX(0);transition:transform .28s cubic-bezier(.22,1,.36,1)}
    :root.light .switch .knob{transform:translateX(24px)}
    .switch .icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:12px;opacity:.85}
    .switch .icons span{pointer-events:none}
    .tip{position:relative}
    .tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);
      background:var(--card);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.22)}

    /* Header temp badge */
    .temp-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-weight:600}
    .temp-badge small{color:var(--muted);font-weight:600}
    @media (max-width:640px){
      .temp-badge{padding:6px 8px;font-size:12px}
      .brand h1{font-size:16px}
      .actions{margin-right:18px}
      .hamburger{margin-right:8px}
    }

    @media (prefers-reduced-motion:no-preference){
      html.theming *{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
    }

    /* Hero */
    .hero{position:relative;padding:56px 0 24px}
    .hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
    .tag{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600}
    .headline{font-size:40px;line-height:1.1;margin:14px 0 12px;letter-spacing:-.02em}
    .sub{color:var(--muted);font-weight:500}
    .search{margin-top:18px;display:flex;gap:10px}
    .input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}
    .pill{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);font-weight:600;color:var(--text);transition:.15s ease}
    .pill:hover{filter:brightness(1.05)}

    /* === REKLAM SLIDER (Hero sağ sütun) === */
    .ad-hero{position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#000;min-height:220px}
    .ad-hero .slides{position:relative;height:260px}
    .ad-hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .45s ease}
    .ad-hero .slide.active{opacity:1}
    .ad-hero .badge{position:absolute;top:10px;right:10px;z-index:2;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:800;letter-spacing:.2px}
    .ad-hero .pagers{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;align-items:center;justify-content:center;z-index:2}
    .ad-hero .pagers button{background:rgba(255,255,255,.4);border:none;width:8px;height:8px;border-radius:999px;cursor:pointer;opacity:.7}
    .ad-hero .pagers button.active{opacity:1;background:#fff}
    .ad-hero .arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
    .ad-hero .arrow.left{left:8px}
    .ad-hero .arrow.right{right:8px}

    /* Sections */
    section{padding:28px 0}

    /* Keşfet başlığını Neler Yapılır gibi ortala */
    .section-title--stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
    .section-title--stack .discover-controls{justify-content:center}
    #kesfet .subtitle{margin:0;color:var(--muted);font-weight:500}
    #kesfet .discover-controls{gap:12px;margin:12px 0 16px;padding:4px 0}
    @media (max-width:640px){#kesfet .discover-controls{gap:12px;margin:14px 0 18px}}

    /* Duyurular */
    .duyurular-bar{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2)}
    .duyurular-bar .container{display:flex;gap:10px;align-items:center}
    .duyurular-bar .label{font-weight:500;padding:4px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px}
    .duyurular-bar marquee{font-weight:500;letter-spacing:.2px}

    /* ===== Hızlı Erişim – yenilendi ===== */
    #hizli{position:relative;padding:28px 0}
    #hizli::before{
      content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:
        radial-gradient(60% 60% at 10% 20%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(60% 60% at 90% 70%, rgba(34,211,238,.10), transparent 60%);
      opacity:.8;
    }
    #hizli .container{position:relative;z-index:1}
    #hizli .section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    #hizli .qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    @media (max-width:900px){#hizli .qgrid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){#hizli .qgrid{grid-template-columns:1fr}}

    .qcard{
      position:relative;overflow:hidden;border-radius:16px;padding:16px;border:1px solid var(--border);
      background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
      box-shadow:0 10px 26px rgba(0,0,0,.25);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display:flex;flex-direction:column;gap:10px;min-height:170px
    }
    .qcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.35);border-color:rgba(255,255,255,.15)}
    .qcard .top{display:flex;align-items:center;gap:10px}
    .qcard .ico{
      width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;
      background:#00000022;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(2px)
    }
    .qcard h3{margin:0;font-size:16px}
    .qcard p{margin:0;color:var(--muted);font-size:13px}
    .qcta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
    .qbtn{
      padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:600;cursor:pointer
    }
    .qbtn:hover{filter:brightness(1.05)}
    .photo{border-radius:12px;border:1px solid var(--border);overflow:hidden;aspect-ratio:16/9;background:#000;background-size:cover;background-position:center}

    /* kart bazlı renk parlaklıkları */
    .qc-eczane::after,.qc-bus::after,.qc-photo::after,.qc-food::after{
      content:"";position:absolute;inset:-30% -10% auto -10%;height:120px;border-radius:50%;
      filter:blur(26px);opacity:.55;z-index:0;pointer-events:none
    }
    .qc-eczane::after{background:radial-gradient(closest-side, #10b981, transparent)}
    .qc-bus::after{background:radial-gradient(closest-side, #6366f1, transparent)}
    .qc-photo::after{background:radial-gradient(closest-side, #f472b6, transparent)}
    .qc-food::after{background:radial-gradient(closest-side, #f59e0b, transparent)}
    .qcard > *{position:relative;z-index:1}

    /* Haberler spot */
    #haberler-spot .spot-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:stretch}
    .news-hero{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#000}
    .news-hero .slides{position:relative;height:380px;min-height:300px;max-height:420px}
    .news-hero .slide{position:absolute;inset:0;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity .45s ease}
    .news-hero .slide.active{opacity:1}
    .news-hero .info{position:absolute;left:0;right:0;bottom:12px;padding:12px 0;background:none;color:#fff}
    .news-hero .info .container{padding:0 20px}
    .news-hero .title{font-size:20px;font-weight:700;margin:0 0 6px}
    .news-hero .desc{font-size:13px;opacity:.9;margin:0}
    .news-hero .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .news-hero .arrow.left{left:10px}
    .news-hero .arrow.right{right:10px}
    .news-hero .pagers{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:10px;align-items:center;justify-content:center}
    .news-hero .pagers button{background:rgba(255,255,255,.5);border:none;width:8px;height:8px;border-radius:999px;cursor:pointer}
    .news-hero .pagers button.active{background:#fff}

    .aside-live{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px}
    .aside-live .video{position:relative;padding-top:56.25%;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#000;margin-top:6px}
    .aside-live iframe{position:absolute;inset:0;width:100%;height:100%}

    /* ===== Neler Yapılır? (ARKAPLAN + kartlar) ===== */
    #neler{
      position:relative;isolation:isolate;
      --neler-bg-h:min(50vw,420px);
    }
    #neler::before{
      content:"";position:absolute;left:0;right:0;top:0;height:var(--neler-bg-h);z-index:0;pointer-events:none;
      background:
        linear-gradient(180deg, rgba(2,6,23,.40) 0%, rgba(2,6,23,0) 85%),
        url("../assets/neler-yapilir-bg.jpg") center bottom/cover no-repeat;
    }
    #neler > .container{position:relative;z-index:1}
    #neler .band{position:relative;background:transparent;border:none}
    #neler .title{text-align:center;margin:0 0 14px;font-size:26px;font-weight:800;letter-spacing:.2px}
    #neler .subtitle{text-align:center;color:var(--muted);margin:0 0 18px}
    .do-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
    .do-card{grid-column:span 3;position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/5;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28);transform:translateY(0) scale(1);transition:.25s ease;border:1px solid var(--border)}
    .do-card:hover{transform:translateY(-6px) scale(1.01)}
    .do-card .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
    .do-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0) 35%,rgba(0,0,0,.75) 100%)}
    .do-card .label{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;color:#fff;font-weight:900;font-size:20px;line-height:1.05;text-shadow:0 2px 12px rgba(0,0,0,.45);text-align:center;width:calc(100% - 24px)}
    .do-badge{position:absolute;top:10px;left:10px;z-index:2;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-weight:700;font-size:12px}

    /* ===== Keşfet – arka plan + Neler ile araya boşluk ===== */
    #kesfet{
      position:relative;isolation:isolate;
      --kesfet-bg-h:min(46vw,360px);
      margin-top:42px;   /* (GÜNCEL) Neler Yapılır ile arayı açtık */
    }
    #kesfet::before{
      content:"";position:absolute;left:0;right:0;top:0;height:var(--kesfet-bg-h);z-index:0;pointer-events:none;
      background:
        linear-gradient(180deg, rgba(2,6,23,.38) 0%, rgba(2,6,23,0) 85%),
        url("../assets/kesfet-bg.jpg") center bottom/cover no-repeat;
    }
    #kesfet > .container{position:relative;z-index:1}

    /* Keşfet kartları */
    .discover-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .chip-btn{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg-soft);color:var(--muted);font-weight:700;cursor:pointer}
    .chip-btn:hover{filter:brightness(1.05)}
    .chip-btn.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(59,130,246,.25)}

    .dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .dcard{position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--border);transition:transform .2s ease,box-shadow .2s ease}
    .dcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
    .dcard .media{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center}
    .dcard .badge-row{position:absolute;top:8px;left:8px;display:flex;gap:6px;z-index:2}
    .dcard .body{padding:12px}
    .dcard .body h3{margin:0;font-size:16px}
    .dcard[data-type="nature"] .badge-row .badge{background:linear-gradient(135deg,#34d399,#22d3ee);color:#fff;border:0;text-shadow:0 1px 10px rgba(0,0,0,.25)}
    .dcard[data-type="culture"] .badge-row .badge{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border:0;text-shadow:0 1px 10px rgba(0,0,0,.25)}
    .dcard[data-type="food"]   .badge-row .badge{background:linear-gradient(135deg,#f472b6,#fb7185);color:#fff;border:0;text-shadow:0 1px 10px rgba(0,0,0,.25)}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px}

    /* Map */
    .map-wrap{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden}
    .map{height:360px;background:
      radial-gradient(circle at 20% 30%, rgba(59,130,246,.08), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(34,211,238,.08), transparent 40%),
      repeating-linear-gradient(45deg,#0000,#0000 10px,rgba(59,130,246,.08) 10px,rgba(59,130,246,.08) 20px)}
    .pin{position:absolute;transform:translate(-50%,-100%);padding:6px 8px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
    .pin .ico{margin-right:6px}
    .pin.piknik .ico{filter:hue-rotate(120deg)}
    .pin.tarih .ico{filter:hue-rotate(35deg)}
    .pin.yeme .ico{filter:hue-rotate(-20deg)}

    /* Gallery */
    .masonry{columns:4 220px; column-gap:12px}
    .masonry img{width:100%;border-radius:12px;margin:0 0 12px;display:block;border:1px solid var(--border);transition:transform .25s ease, box-shadow .25s ease}
    .masonry img:hover{transform:scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.35)}

    /* Image modal */
    #imgModal{border:none;border-radius:16px;padding:0;background:transparent}
    #imgModal::backdrop{background:rgba(0,0,0,.7)}
    .modal-body{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    .modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
    .modal-img{max-width:min(92vw,1100px);max-height:82vh;display:block}

    /* ===== Bülten – iki sütun ===== */
    #bulten{padding:26px 0}
    #bulten .band{
      display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:center;
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      border:1px solid rgba(255,255,255,.35);border-radius:18px;padding:18px;color:#fff
    }
    #bulten h3{margin:0 0 6px}
    #bulten p{margin:0 0 10px;opacity:.95}
    #bulten .row{display:flex;gap:10px;flex-wrap:nowrap}
    #bulten input[type="email"]{
      flex:1;min-width:220px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.55);
      background:rgba(0,0,0,.12);color:#fff
    }
    #bulten button{
      padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.55);
      background:#0000001a;color:#fff;font-weight:700;cursor:pointer
    }
    #bulten .ok{display:none;margin-top:8px;font-weight:600}
    @media (max-width:820px){#bulten .band{grid-template-columns:1fr}.row{flex-wrap:wrap}}

    /* Footer */
    footer{margin-top:32px;padding:24px 0;border-top:1px solid var(--border);color:var(--muted)}
    footer .foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
    footer .links{display:flex;gap:14px;flex-wrap:wrap}

    /* Responsive */
    @media (max-width:1100px){.hero .wrap{grid-template-columns:1fr}}
    @media (max-width:1000px){#haberler-spot .spot-grid{grid-template-columns:1fr}}
    @media (max-width:640px){
      .menu{display:none}
      .headline{font-size:32px}
      .actions .btn{padding:10px}
      .news-hero .slides{height:260px;min-height:220px}
      .news-hero .info{bottom:8px}
      .do-card{grid-column:span 6}
    }

    /* Mobile hamburger */
    .hamburger{display:none;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:600;cursor:pointer}
    .hamburger svg{width:20px;height:20px}
    @media (max-width:640px){.hamburger{display:inline-flex}}

    /* Mobile sheet */
    #mobileSheet{border:none;border-radius:16px 16px 0 0;width:100%;max-width:640px;margin:auto;padding:0;background:var(--bg-soft);color:var(--text)}
    #mobileSheet::backdrop{background:rgba(0,0,0,.45)}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border)}
    .sheet-body{padding:8px 14px 18px}
    .sheet-menu a{display:block;padding:12px 10px;border-bottom:1px dashed var(--border);color:var(--text)}
    .sheet-menu a:hover{background:rgba(59,130,246,.12);color:var(--brand)}
    .sheet-search{display:flex;gap:8px;margin:6px 0 12px}
    .sheet-search input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}
    .sheet-social{display:flex;gap:10px;margin-top:10px}
    .sheet-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}

    /* Açık modda: Neler Yapılır başlık & alt yazı beyaz kalsın */
    :root.light #neler .title,
    :root.light #neler .subtitle{
      color:#fff !important;text-shadow:0 2px 12px rgba(0,0,0,.35);
    }
    :root.light #neler .title span{
      background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important;
    }

    /* (YENİ) Açık modda: Keşfet başlık + alt yazı beyaz; çipler daha belirgin */
    :root.light #kesfet .section-title--stack h2,
    :root.light #kesfet .subtitle{
      color:#fff !important;
      text-shadow:0 2px 12px rgba(0,0,0,.35);
    }
    :root.light #kesfet .chip-btn{
      background:rgba(0,0,0,.25);
      border-color:rgba(255,255,255,.35);
      color:#fff;
    }
    :root.light #kesfet .chip-btn.active{
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      border-color:transparent;
      color:#fff;
    }

/* --- Yeni Hızlı Menü Kart Tasarımı --- */
.quick-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 20px;
}

.card-wrap {
  width: 220px;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  color: #616161;
  box-shadow: rgba(0,0,0,0.19) 0px 10px 20px,
              rgba(0,0,0,0.23) 0px 6px 6px;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.card-wrap:hover { transform: scale(1.05); }

.card-header {
  height: 140px;
  width: 100%;
  border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
  display: grid;
  place-items: center;
}
.card-header i { color: #fff; font-size: 52px; }

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85%;
  margin: 0 auto;
}
.card-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.card-text {
  text-align: center;
  font-size: 13px;
  margin-bottom: 15px;
}
.card-btn {
  border: none;
  border-radius: 100px;
  padding: 6px 20px;
  color: #fff;
  margin-bottom: 15px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Renk Temaları */
.card-header.one { background: linear-gradient(to bottom left, #f12711, #f5af19); }
.card-header.two { background: linear-gradient(to bottom left, #7F00FF, #E100FF); }
.card-header.three { background: linear-gradient(to bottom left, #3f2b96, #a8c0ff); }
.card-header.four { background: linear-gradient(to bottom left, #11998e, #38ef7d); }

.card-btn.one { background: linear-gradient(to left, #f12711, #f5af19); }
.card-btn.two { background: linear-gradient(to left, #7F00FF, #E100FF); }
.card-btn.three { background: linear-gradient(to left, #3f2b96, #a8c0ff); }
.card-btn.four { background: linear-gradient(to left, #11998e, #38ef7d); }




/* kare */
  background:#fff; border:1px solid #e6e8ec; border-radius:20px;
  color:#334155; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
body.dark .qa-item{ background:#0f172a; border-color:#223047; color:#d1d5db; }
.qa-item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,23,42,.12); border-color:#9db7ff; }

.qa-ico svg{ width:42px; height:42px; stroke: currentColor; }
.qa-label{ font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase; opacity:.9; }


/* === Hızlı Erişim - İkonlu Grid (güncellendi v3) === */
.qa-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:14px;
  margin:20px auto;
  max-width:1200px; /* ortala */
}
@media (max-width: 720px){
  .qa-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.qa-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; gap:8px;
  aspect-ratio: 1 / 1;  /* kare */
  background:#fff; border:1px solid #e6e8ec; border-radius:16px;
  color:#475569; transition:all .2s ease;
  font-size:14px;
}
body.dark .qa-item{ background:#0f172a; border-color:#223047; color:#cbd5e1; }
.qa-item:hover{
  transform:translateY(-3px);
  background:#2563eb; 
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 8px 20px rgba(37,99,235,.35);
}
body.dark .qa-item:hover{ background:#3b82f6; border-color:#3b82f6; color:#fff; }

.qa-ico svg{ width:32px; height:32px; stroke: currentColor; }
.qa-label{ font-weight:600; font-size:12px; letter-spacing:.4px; text-transform:uppercase; opacity:.9; text-align:center; }


/* === Hızlı Erişim BG === */
#hizli{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* === Hızlı Erişim – ikonlu grid (nn base) === */
#hizli .qa-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:12px;
  margin:16px auto 0;
  max-width: 960px;
}
@media (max-width: 720px){
  #hizli .qa-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
#hizli .qa-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio: 1 / 1;
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:14px;
  color:#475569;
  gap:6px;
  text-decoration:none;
  transition: all .2s ease;
}
body.dark #hizli .qa-item{ background:#0f172a; border-color:#223047; color:#cbd5e1; }
#hizli .qa-item:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 6px 18px rgba(37,99,235,.30);
}
#hizli .qa-ico svg{ width:24px; height:24px; stroke: currentColor; }
#hizli .qa-label{ font-weight:600; font-size:10.5px; letter-spacing:.35px; text-transform:uppercase; text-align:center; }


/* === Hızlı Erişim – gradient arkaplan (final) === */
#hizli{
  position:relative; isolation:isolate;
  --hizli-bg-h: min(46vw, 360px);
  padding: 28px 0;
}
#hizli::before{
  content:""; position:absolute; left:0; right:0; top:0; height: var(--hizli-bg-h);
  z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 10% 20%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(60% 60% at 90% 70%, rgba(2,132,199,.10), transparent 60%),
    linear-gradient(180deg, rgba(37,99,235,.08) 0%, rgba(2,6,23,0) 85%);
}
#hizli > .container{ position:relative; z-index:1; padding-left:16px; padding-right:16px; }
@media (min-width: 1024px){ #hizli > .container{ padding-left:0; padding-right:0; } }

/* Başlık & ikon site renkleriyle uyumlu olsun */
#hizli .section-title h2{ color: var(--fg); }
#hizli .section-title i{ color: var(--brand); }


/* === Hızlı Erişim container mobile padding (final fix) === */
#hizli .container{max-width:1200px;margin:0 auto;padding:0 16px;}
@media(min-width:992px){#hizli .container{padding:0;}}


/* Keşfet kartları – mobil sağ/sol boşluk */




/* Keşfet bölümü hizalama - Hızlı Erişim ile aynı */
#kesfet .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 992px) {
  #kesfet .container {
    padding: 0;
  }
}


@media (max-width: 600px){
  /* Hızlı Erişim (qa-grid): Mobilde 3'lü grid */
  #hizli .qa-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Kart iç tipografi çok sıkışmasın */
  #hizli .qcard h3{ font-size: .9rem; }
  #hizli .qcard .ico{ font-size: 1.1rem; }
}
  #hizli .qa-ico svg{ width: 20px; height: 20px; }
  #hizli .qa-label{ font-size: 10px; }
}


/* === Hızlı Erişim – mobil hizalama 4'lü === */
@media (max-width: 600px){
  /* Hızlı Erişim (qa-grid): Mobilde 3'lü grid */
  #hizli .qa-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Kart iç tipografi çok sıkışmasın */
  #hizli .qcard h3{ font-size: .9rem; }
  #hizli .qcard .ico{ font-size: 1.1rem; }
}
  #hizli .qa-ico svg{ width: 20px; height: 20px; }
  #hizli .qa-label{ font-size: 10px; }
}


@media (max-width: 600px){
  /* Hızlı Erişim (qa-grid): Mobilde 3'lü grid */
  #hizli .qa-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Kart iç tipografi çok sıkışmasın */
  #hizli .qcard h3{ font-size: .9rem; }
  #hizli .qcard .ico{ font-size: 1.1rem; }
}
  #hizli .qa-ico svg{ width: 22px; height: 22px; }
  #hizli .qa-label{ font-size: 11px; }
}

@media (min-width: 601px) and (max-width: 900px){
  #hizli .qa-grid{
    grid-template-columns: repeat(4, 1fr); /* Tablet: 4'lü */
    gap: 14px;
    justify-content: center;
    padding: 0 16px;
  }
  #hizli .qa-item{ max-width: 160px; }
}


@media (max-width: 600px){
  /* Hızlı Erişim (qa-grid): Mobilde 3'lü grid */
  #hizli .qa-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Kart iç tipografi çok sıkışmasın */
  #hizli .qcard h3{ font-size: .9rem; }
  #hizli .qcard .ico{ font-size: 1.1rem; }
}
  #hizli .qa-ico svg{ width: 20px; height: 20px; }
  #hizli .qa-label{ font-size: 10px; }
}

@media (min-width: 601px) and (max-width: 900px){
  #hizli .qa-grid{
    grid-template-columns: repeat(4, 1fr); /* Tablet: 4'lü */
    gap: 14px;
    justify-content: center;
    padding: 0 14px;
  }
  #hizli .qa-item{ max-width: 150px; }
}


/* === Hızlı Erişim – responsive 4'lü === */
@media (max-width: 600px){
  /* Hızlı Erişim (qa-grid): Mobilde 3'lü grid */
  #hizli .qa-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Kart iç tipografi çok sıkışmasın */
  #hizli .qcard h3{ font-size: .9rem; }
  #hizli .qcard .ico{ font-size: 1.1rem; }
}
  #hizli .qa-ico svg{ width: 18px; height: 18px; }
  #hizli .qa-label{ font-size: 9px; }
}

@media (min-width: 601px) and (max-width: 900px){
  #hizli .qa-grid{
    grid-template-columns: repeat(4, 1fr); /* Tablet: 4'lü */
    gap: 14px;
    justify-content: center;
    padding: 0 14px;
  }
  #hizli .qa-item{ max-width: 140px; }
}

/* === Desktop-only thicker borders for Quick Access cards (added by assistant) === */
@media (min-width: 1024px) {
  .qcard, .card, .card-wrap, .quick-access .card, .quick-access .qcard, .qa-card {
    border-width: 2.5px !important;
  }
}

/* === Footer Redesign – .ftz (light/dark) === */
.ftz{
  background:#ffffff; /* light */
  border-top:1px solid #e6e8ec;
  position:relative;
}
html[data-theme="dark"] .ftz,
body[data-theme="dark"] .ftz,
:root[data-theme="dark"] .ftz,
html.dark .ftz, body.dark .ftz{
  background:#0b1220; /* dark */
  border-top-color:#1f2937;
}
.ftz .ftz-wrap{max-width:1180px;margin:0 auto;padding:28px 16px;display:flex;flex-direction:column;gap:18px}
.ftz .ftz-top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e6e8ec;padding-bottom:14px}
html[data-theme="dark"] .ftz .ftz-top,
body[data-theme="dark"] .ftz .ftz-top,
:root[data-theme="dark"] .ftz .ftz-top,
html.dark .ftz .ftz-top, body.dark .ftz .ftz-top{border-color:#1f2937}
@media (max-width: 780px){ .ftz .ftz-top{flex-direction:column;align-items:flex-start} }

.ftz .ftz-logo{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:-.02em}
.ftz .ftz-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#111827;color:#fff;font-size:.9rem}
html[data-theme="dark"] .ftz .ftz-mark, body[data-theme="dark"] .ftz .ftz-mark, html.dark .ftz .ftz-mark{background:#334155}
.ftz .ftz-name{font-size:1.1rem}
.ftz .ftz-tag{color:#6b7280;margin:.2rem 0 0}
html[data-theme="dark"] .ftz .ftz-tag{color:#94a3b8}

.ftz .ftz-links{display:flex;gap:12px;flex-wrap:wrap}
.ftz .ftz-links a{color:#374151;text-decoration:none}
.ftz .ftz-links a:hover{text-decoration:underline}
html[data-theme="dark"] .ftz .ftz-links a{color:#cbd5e1}

.ftz .ftz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width: 980px){ .ftz .ftz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 600px){ .ftz .ftz-grid{grid-template-columns:1fr} }
.ftz .ftz-col h4{margin:0 0 8px;font-size:.95rem;color:#111827}
html[data-theme="dark"] .ftz .ftz-col h4{color:#e5e7eb}
.ftz .ftz-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftz .ftz-list a{color:#374151;text-decoration:none}
.ftz .ftz-list a:hover{text-decoration:underline}
html[data-theme="dark"] .ftz .ftz-list a{color:#cbd5e1}

.ftz .ftz-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e6e8ec;padding-top:12px;color:#6b7280;font-size:.92rem}
html[data-theme="dark"] .ftz .ftz-bottom{border-color:#1f2937;color:#94a3b8}
@media (max-width: 640px){ .ftz .ftz-bottom{flex-direction:column;align-items:flex-start} }
.ftz .ftz-social{display:flex;gap:10px}
.ftz .ftz-social a{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;border:1px solid #e6e8ec;background:#fff}
html[data-theme="dark"] .ftz .ftz-social a{background:#0f172a;border-color:#1f2937}
.ftz .ftz-social svg{width:18px;height:18px;opacity:.9}

/* ftz root.light patch */
/* Footer – :root.light açık tema, aksi durumda koyu tema */
:root.light .ftz {
  background: #ffffff;
  border-top-color: #e5e7eb;
}
:root:not(.light) .ftz {
  background: #0b1220;
  border-top-color: #1f2937;
}


/* ftz dark text colors (scoped, no icon override) */
:root:not(.light) .ftz,
:root:not(.light) .ftz .ftz-top,
:root:not(.light) .ftz .ftz-grid,
:root:not(.light) .ftz .ftz-bottom { color: #ffffff; }

:root:not(.light) .ftz h4,
:root:not(.light) .ftz .ftz-name,
:root:not(.light) .ftz .ftz-tag { color: #ffffff; }

/* Links except social icons */
:root:not(.light) .ftz .ftz-links a,
:root:not(.light) .ftz .ftz-list a,


:root:not(.light) .ftz .ftz-links a:hover,
:root:not(.light) .ftz .ftz-list a:hover,


/* Do NOT force colors for social icons; keep their original styling */


/* ftz dark: text & links (exclude social icons) */
:root:not(.light) .ftz .ftz-links a,
:root:not(.light) .ftz .ftz-list a { color: #ffffff; }
:root:not(.light) .ftz .ftz-links a:hover,
:root:not(.light) .ftz .ftz-list a:hover { color: #38bdf8; }

/* Do not style social icons (keep their own visuals). Ensure their background stays transparent in dark mode for contrast. */
:root:not(.light) .ftz .ftz-social a {
  background: transparent;
  border-color: #334155;
  /* no color override here; icon uses its own currentColor from markup */
}