:root{
    --ink:#0A0D14;
    --ink-2:#11151F;
    --ink-3:#171C28;
    --gold:#D4AF37;
    --gold-soft:#C9A227;
    --gold-bright:#F0CF6B;
    --amber:#E8863A;
    --parchment:#F1E7D0;
    --parchment-dim:#B9AF98;
    --muted:#8B8676;
    --maroon:#3A1710;
    --line: rgba(212,175,55,0.28);
    --shadow: 0 18px 50px rgba(0,0,0,0.45);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--parchment);
    font-family:'Mulish',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Cormorant Garamond', serif;
    margin:0;
    font-weight:600;
    color:var(--parchment);
  }

  .eyebrow{
    font-family:'Cinzel', serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:12px;
  }
  .eyebrow::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--gold-soft);
    display:inline-block;
  }

  a{color:inherit;text-decoration:none;}
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:4px;
    border-radius:4px;
  }

  img{max-width:100%;display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    padding:22px 0;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  header.nav.scrolled{
    background:rgba(10,13,20,0.86);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-mark{
    font-family:'Cormorant Garamond', serif;
    font-size:23px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--parchment);
  }
  .nav-mark span{color:var(--gold);}
  .nav-links{
    display:flex;
    gap:34px;
    font-family:'Cinzel', serif;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--parchment-dim);
  }
  .nav-links a{transition:color .25s ease;}
  .nav-links a:hover{color:var(--gold-bright);}
  .nav-links li{list-style:none;}
  .nav-links ul{display:flex;gap:34px;margin:0;padding:0;}
  .nav-cta{
    display:none;
  }
  @media (max-width:760px){
    .nav-links{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:160px 24px 100px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    background-image:url('/images/hero-bg.webp');
    background-size:cover;
    background-position:center 30%;
    animation:kenburns 28s ease-in-out infinite alternate;
  }
  @keyframes kenburns{
    from{transform:scale(1);}
    to{transform:scale(1.09);}
  }
  .hero-veil{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(10,13,20,0.15) 0%, rgba(10,13,20,0.55) 45%, rgba(10,13,20,0.92) 100%),
      linear-gradient(180deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.25) 30%, rgba(10,13,20,0.85) 100%);
  }
  .stars{
    position:absolute;inset:0;
    pointer-events:none;
  }
  .star{
    position:absolute;
    width:2px;height:2px;
    background:var(--gold-bright);
    border-radius:50%;
    opacity:0;
    animation:twinkle 4.5s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%,100%{opacity:0;}
    50%{opacity:.9;}
  }

  .hero-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* ---------- HAREKETLİ LOGO ---------- */
  /* Kare video, yumuşak daire maskesiyle zemine oturtulur.
     Kutu boyutu sabit -> sayfa akışını, sütun/satır yapısını bozmaz. */
  .brand-logo{
    position:relative;
    flex:0 0 auto;
    width:clamp(168px, 40vw, 224px);
    aspect-ratio:1 / 1;
    margin:0 auto 34px;
    animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both;
  }

  /* Arka plan yumuşatıcı: logonun karesini gizleyen koyu vinyet + altın hâle.
     Video zemini ile arka plan arasındaki geçişi görünmez kılar. */
  .brand-logo::before{
    content:"";
    position:absolute;
    inset:-26%;
    border-radius:50%;
    background:
      radial-gradient(circle closest-side at 50% 50%,
        rgba(212,175,55,0.00) 62%,
        rgba(212,175,55,0.14) 69%,
        rgba(212,175,55,0.04) 78%,
        rgba(212,175,55,0.00) 92%),
      radial-gradient(circle closest-side at 50% 50%,
        rgba(10,13,20,1.00) 0%,
        rgba(10,13,20,1.00) 64%,
        rgba(10,13,20,0.88) 71%,
        rgba(10,13,20,0.52) 81%,
        rgba(10,13,20,0.18) 91%,
        rgba(10,13,20,0.00) 100%);
    animation:logo-halo 6s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
  }

  /* zemin gölgesi — logonun salınımıyla daralıp genişler */
  .brand-logo::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7%;
    width:54%;
    height:7%;
    margin-left:-27%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.40) 46%,
      transparent 74%);
    filter:blur(4px);
    transform-origin:50% 50%;
    animation:logo-shadow 7.3s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
  }

  .brand-logo-media{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
    outline:none;
    background:transparent;
    pointer-events:none;
    /* kare zemini yumuşak kenarlı daireye maskele */
    -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0 43.5%, rgba(0,0,0,0) 48%);
            mask-image:radial-gradient(circle at 50% 50%, #000 0 43.5%, rgba(0,0,0,0) 48%);
    filter:drop-shadow(0 16px 28px rgba(0,0,0,0.55));
  }

  @keyframes logo-halo{
    0%,100%{transform:scale(0.985); opacity:.92;}
    50%    {transform:scale(1.02);  opacity:1;}
  }
  /* gölge profili logo videosunun 7,3 sn'lik dönüş eğrisine göre ayarlandı */
  @keyframes logo-shadow{
    0%   {transform:scaleX(1);    opacity:.75;}
    4%   {transform:scaleX(1);    opacity:.75;}
    16%  {transform:scaleX(.97);  opacity:.73;}
    29%  {transform:scaleX(.83);  opacity:.66;}
    41%  {transform:scaleX(.55);  opacity:.54;}
    47%  {transform:scaleX(.43);  opacity:.47;}
    53%  {transform:scaleX(.57);  opacity:.55;}
    66%  {transform:scaleX(.85);  opacity:.67;}
    82%  {transform:scaleX(.99);  opacity:.74;}
    86%,100%{transform:scaleX(1); opacity:.75;}
  }

  .hero-eyebrow{
    animation:rise 1.1s .1s cubic-bezier(.2,.8,.2,1) both;
    margin-bottom:22px;
  }

  .hero h1{
    font-size:clamp(56px, 10vw, 118px);
    line-height:0.95;
    letter-spacing:0.005em;
    background:linear-gradient(180deg, #FBEFC9 0%, var(--gold-bright) 45%, var(--gold-soft) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:rise 1.1s .18s cubic-bezier(.2,.8,.2,1) both;
    text-shadow:0 30px 60px rgba(0,0,0,0.5);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--parchment);
    -webkit-text-fill-color:var(--parchment);
  }

  .hero-tagline{
    margin-top:26px;
    font-family:'Cinzel', serif;
    font-size:13px;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    animation:rise 1.1s .3s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-tagline .dot{color:var(--gold);margin:0 14px;}
  @media (max-width:430px){
    .hero-tagline{font-size:11px; letter-spacing:0.2em;}
    .hero-tagline .dot{margin:0 8px;}
  }

  .hero-sub{
    margin-top:22px;
    max-width:480px;
    font-size:17px;
    line-height:1.7;
    color:var(--parchment-dim);
    animation:rise 1.1s .38s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes rise{
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
  }

  .scroll-cue{
    position:absolute;
    bottom:36px;left:50%;
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;
    gap:10px;
    color:var(--parchment-dim);
    font-family:'Cinzel',serif;
    font-size:10px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    z-index:2;
  }
  .scroll-cue .line{
    width:1px;height:40px;
    background:linear-gradient(var(--gold), transparent);
    animation:pulse-line 2.4s ease-in-out infinite;
  }
  @keyframes pulse-line{
    0%,100%{opacity:.35;}
    50%{opacity:1;}
  }

  /* ---------- ARCH DIVIDER (signature) ---------- */
  .arch-divider{
    display:flex;
    justify-content:center;
    padding:64px 0;
    background:var(--ink);
  }
  .arch-divider svg{width:120px;height:auto;}

  /* ---------- SECTION GENERIC ---------- */
  section{
    background:var(--ink);
    position:relative;
  }
  .section-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
  }
  .section-head h2{
    font-size:clamp(34px,4.4vw,52px);
    margin-top:18px;
    color:var(--parchment);
  }
  .section-head p{
    margin-top:18px;
    color:var(--parchment-dim);
    font-size:16px;
    line-height:1.75;
  }

  /* ---------- FOUR GATES ---------- */
  .gates{
    padding:20px 0 100px;
  }
  .gates-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
  }
  .gate{
    background:var(--ink-2);
    padding:44px 26px;
    text-align:center;
    transition:background .35s ease, transform .35s ease;
  }
  .gate:hover{background:var(--ink-3); transform:translateY(-4px);}
  .gate svg{width:34px;height:34px;margin-bottom:22px;color:var(--gold);}
  .gate h3{
    font-size:21px;
    color:var(--parchment);
    margin-bottom:12px;
  }
  .gate p{
    font-size:13.5px;
    color:var(--parchment-dim);
    line-height:1.65;
    margin:0;
  }
  @media (max-width:900px){
    .gates-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .gates-grid{grid-template-columns:1fr;}
  }

  /* ---------- MISSION ---------- */
  .mission{
    padding:20px 0 110px;
  }
  .mission-grid{
    display:grid;
    grid-template-columns:1fr 0.85fr;
    gap:70px;
    align-items:center;
  }
  .mission-visual{
    position:relative;
    aspect-ratio:4/5;
    border-radius:6px;
    overflow:hidden;
    background:
      linear-gradient(160deg, rgba(10,13,20,0.15), rgba(10,13,20,0.85)),
      url('/images/mission-visual.webp');
    background-size:cover;
    background-position: 78% center;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .mission-visual::after{
    content:"";
    position:absolute;inset:0;
    border:1px solid rgba(212,175,55,0.25);
    margin:14px;
    border-radius:3px;
    pointer-events:none;
  }
  .mission-text .eyebrow{margin-bottom:20px;}
  .mission-text h2{
    font-size:clamp(30px,3.6vw,44px);
    line-height:1.15;
    margin-bottom:26px;
  }
  .mission-text p{
    color:var(--parchment-dim);
    font-size:16.5px;
    line-height:1.85;
    margin-bottom:18px;
  }
  .pull{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid var(--line);
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:23px;
    color:var(--gold-bright);
  }
  @media (max-width:880px){
    .mission-grid{grid-template-columns:1fr; gap:44px;}
    .mission-visual{aspect-ratio:16/10;}
  }

  /* ---------- FEATURED / VIDEOS ---------- */
  .featured{padding:20px 0 110px;}
  .featured-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:48px;
    gap:24px;
    flex-wrap:wrap;
  }
  .featured-top h2{font-size:clamp(30px,3.6vw,44px);margin-top:16px;}
  .featured-note{
    max-width:280px;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.6;
    border-left:2px solid var(--gold-soft);
    padding-left:16px;
  }
  .video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:start;
    gap:26px;
  }
  .video-card{
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    display:block;
    text-decoration:none;
    color:inherit;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .video-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:var(--gold-soft);
  }
  /* Tüm kartlar aynı oranda -> satır/sütun hizası hiç bozulmaz.
     Kaynak: normal video = maxresdefault (16:9), shorts = oardefault (9:16).
     İkisinde de siyah bant yok, ortadan kırpılır. */
  .video-thumb{
    aspect-ratio:16/10;
    background-color:#0A0D14;
    background-image:
      radial-gradient(circle at 50% 42%, rgba(212,175,55,0.16), transparent 60%),
      linear-gradient(150deg, #1B2130, #0A0D14 70%);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--line);
    cursor:pointer;
  }
  .video-thumb.playing::before{opacity:0; pointer-events:none;}
  .video-thumb iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }
  .video-thumb::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,13,20,0.05) 40%, rgba(10,13,20,0.55));
  }
  .play-btn{
    width:50px;height:50px;
    border-radius:50%;
    border:1px solid var(--gold-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-bright);
    background:rgba(212,175,55,0.08);
  }
  .play-btn svg{width:16px;height:16px;margin-left:2px;}
  .soon-tag, .type-tag{
    position:absolute;top:14px;right:14px;
    font-family:'Cinzel',serif;
    font-size:9px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink);
    background:var(--gold-soft);
    padding:5px 9px;
    border-radius:2px;
    z-index:1;
  }
  .play-btn{position:relative; z-index:1;}
  .video-info{padding:18px 20px 22px;}
  .video-info h3{
    font-size:17.5px;
    font-weight:600;
    color:var(--parchment);
    margin-bottom:9px;
    line-height:1.32;
    /* uzun başlıklar 2 satırda kesilir -> kartlar hizada kalır */
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.64em;
  }
  .video-info p{
    font-size:12.5px;
    color:var(--muted);
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .v-meta{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .ext-link{
    color:var(--gold-soft);
    text-decoration:none;
    font-size:11px;
    white-space:nowrap;
    transition:color .25s ease;
  }
  .ext-link:hover{color:var(--gold-bright);}
  @media (max-width:900px){
    .video-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .video-grid{grid-template-columns:1fr;}
  }
  .channel-cta{
    text-align:center;
    margin-top:46px;
  }
  .channel-link{
    font-family:'Cinzel',serif;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-bright);
    text-decoration:none;
    border-bottom:1px solid var(--gold-soft);
    padding-bottom:4px;
    transition:color .25s ease, border-color .25s ease;
  }
  .channel-link:hover{color:#FBEFC9; border-color:#FBEFC9;}

  /* ---------- DUAS ---------- */
  .duas{padding:20px 0 120px;}
  .duas-grid{
    display:flex;
    flex-direction:column;
    gap:26px;
  }
  .dua-detail{
    padding:44px 46px;
    border:1px solid var(--line);
    border-radius:6px;
    background:linear-gradient(160deg, var(--ink-2), var(--ink));
  }
  .dua-detail-head{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:28px;
  }
  .dua-detail-head svg{width:26px;height:26px;color:var(--gold);flex-shrink:0;}
  .dua-detail-head h3{font-size:24px;margin-right:auto;}
  .dua-tag{
    font-family:'Cinzel',serif;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    padding:5px 12px;
    border-radius:20px;
    white-space:nowrap;
  }
  .dua-arabic{
    font-family:'Amiri', serif;
    font-size:clamp(21px,2.8vw,28px);
    line-height:2.15;
    text-align:center;
    color:var(--gold-bright);
    direction:rtl;
    margin:0 0 32px;
  }
  .dua-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:18px;
  }
  .dua-meta-label{
    display:block;
    font-family:'Cinzel',serif;
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin-bottom:8px;
  }
  .dua-meta p{
    color:var(--parchment-dim);
    font-size:14.5px;
    line-height:1.75;
    margin:0;
  }
  .dua-source{
    font-size:11.5px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:16px;
    margin-top:8px;
  }
  @media (max-width:700px){
    .dua-detail{padding:34px 24px;}
    .dua-meta{grid-template-columns:1fr; gap:20px;}
  }

  /* ---------- ABOUT / SOCIAL ---------- */
  .about-social{padding:20px 0 110px;}
  .about-body{
    max-width:680px;
    margin:0 auto 56px;
    text-align:center;
  }
  .about-body p{
    color:var(--parchment-dim);
    font-size:16px;
    line-height:1.85;
    margin-bottom:18px;
  }
  .about-body .dua-line{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:19px;
    color:var(--gold-bright);
    margin-top:22px;
  }
  .stats-row{
    display:flex;
    justify-content:center;
    gap:56px;
    flex-wrap:wrap;
    padding:36px 0;
    margin-bottom:40px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .stat-num{
    font-family:'Cormorant Garamond', serif;
    font-size:28px;
    font-weight:700;
    color:var(--parchment);
  }
  .stat-label{
    font-family:'Cinzel',serif;
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .social-row{
    display:flex;
    justify-content:center;
    gap:36px;
    flex-wrap:wrap;
  }
  .social-row a{
    font-family:'Cinzel',serif;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    text-decoration:none;
    border-bottom:1px solid transparent;
    padding-bottom:4px;
    transition:color .25s ease, border-color .25s ease;
  }
  .social-row a:hover{color:var(--gold-bright); border-color:var(--gold-soft);}
  @media (max-width:560px){
    .stats-row{gap:32px;}
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:70px 0 40px;
    text-align:center;
    border-top:1px solid var(--line);
  }
  .footer-mark{
    font-family:'Cormorant Garamond', serif;
    font-size:28px;
    font-weight:700;
    color:var(--parchment);
    margin-bottom:10px;
  }
  .footer-mark span{color:var(--gold);}
  footer .tag{
    font-family:'Cinzel',serif;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    margin-bottom:34px;
  }
  .footer-links{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-bottom:40px;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--parchment-dim);
  }
  .footer-links a:hover{color:var(--gold-bright);}
  .footer-bottom{
    font-size:12px;
    color:var(--muted);
  }

  /* "Hareketi azalt" ayarı açıksa: baş döndüren büyük hareketleri YUMUŞAT,
     ama sahneyi tamamen öldürme (logo, hafif solma, yavaş parıltı kalır). */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hero-bg{ animation-duration:80s; }
    .hero-beam, .arch-divider::before, .brand-logo::before,
    .smoke-puff{ animation-duration:30s !important; }
    .star{ animation-duration:9s; }
  }

  /* =================================================================
     SAHNE KATMANI  (app.js ile birlikte çalışır)
     Mevcut tasarımı değiştirmez; sadece hareket + derinlik ekler.
     ================================================================= */

  /* ---------- REVEAL: kaydırınca beliren bölümler ---------- */
  /* .motion-ok yalnızca JS + güvenli hareket varsa <html>'e eklenir.
     Yoksa hiçbir şey gizlenmez — içerik her koşulda görünür. */
  .motion-ok .reveal{
    opacity:0;
    transform:translateY(34px);
    transition:opacity 1s cubic-bezier(.2,.8,.2,1),
               transform 1s cubic-bezier(.2,.8,.2,1),
               filter 1s ease;
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform;
  }
  .motion-ok .reveal.is-visible{
    opacity:1;
    transform:none;
    filter:none;
  }

  /* DUMANLI ZOOM-IN — içerik sisin içinden büyüyerek belirir */
  .motion-ok .reveal[data-reveal="zoom"]{
    transform:scale(1.16);
    filter:blur(10px);
  }
  .motion-ok .reveal[data-reveal="left"]  { transform:translateX(-44px); }
  .motion-ok .reveal[data-reveal="right"] { transform:translateX(44px); }
  .motion-ok .reveal[data-reveal="fade"]  { transform:none; }
  .motion-ok .reveal.is-visible[data-reveal]{ transform:none; filter:none; }

  /* hareketi azalt: kayma/bulanıklık yok, sadece yumuşak solma kalır */
  @media (prefers-reduced-motion: reduce){
    .motion-ok .reveal,
    .motion-ok .reveal[data-reveal]{
      transform:none !important;
      filter:none !important;
      transition:opacity .7s ease !important;
    }
  }

  /* ---------- DERİNLİK KATMANI: arka plan (cami figürü buraya) ---------- */
  .depth-layer{
    position:fixed;
    inset:-8% -8% -8% -8%;
    z-index:0;
    pointer-events:none;
    background-image:
      radial-gradient(ellipse at 50% 42%, rgba(212,175,55,0.05), transparent 60%),
      url('/images/mosque.webp');            /* dosya yoksa sessizce boş kalır */
    background-size:cover;
    background-position:center 38%;
    background-repeat:no-repeat;
    opacity:0;                                /* JS scroll ile 0 → ~0.5 açar */
    filter:blur(3px) saturate(0.9);
    transition:opacity .6s ease;
  }
  /* ================================================================
     3B ATMOSFER TUVALİ  (fx.js · Three.js)
     ================================================================ */
  #fx-canvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:0;
    pointer-events:none;
    display:block;
  }
  /* içerik tuvalin üstünde dursun */
  .hero, section, footer, .arch-divider{ position:relative; z-index:1; }

  /* bölümler bir tık saydam → arkadaki toz/atmosfer sızsın.
     Metin okunurluğu için koyu kalır; 3B motor açıkken biraz daha şeffaf. */
  section{ background:rgba(10,13,20,0.92); }
  .arch-divider{ background:rgba(10,13,20,0.72); }
  .fx-on section{ background:rgba(10,13,20,0.80); }
  .fx-on .arch-divider{ background:transparent; }
  .fx-on footer{ background:rgba(10,13,20,0.82); }

  /* 3B motor çalışıyorsa CSS duman yedeği gizlenir */
  .fx-on .smoke{ display:none; }
  @media (prefers-reduced-motion: reduce){
    .fx-on .smoke{ display:none; }   /* fx.js tek kare çizip atmosferi bırakır */
  }

  /* ---------- DUMAN KATMANI: sürekli süzülen sıcak sis ----------
     Görünürlüğü ayarlamak için: --smoke-strength (0 kapalı → 1.6 yoğun) */
  .smoke{
    --smoke-strength: 1;
    position:fixed;
    inset:0;
    z-index:2;                 /* içeriğin üstünde ama nav'ın altında */
    pointer-events:none;
    overflow:hidden;
    opacity:calc(0.9 * var(--smoke-strength));
  }
  .smoke-puff{
    position:absolute;
    display:block;
    border-radius:50%;
    filter:blur(42px);
    will-change:transform, opacity;
    mix-blend-mode:screen;
  }
  .smoke-puff.s1{
    width:64vw; height:64vw;
    left:-16vw; top:2%;
    background:radial-gradient(circle at 50% 50%,
      rgba(244,196,120,0.42), rgba(232,134,58,0.18) 38%, rgba(212,175,55,0.05) 62%, transparent 78%);
    animation:smokeDrift1 30s ease-in-out infinite;
  }
  .smoke-puff.s2{
    width:56vw; height:56vw;
    right:-14vw; top:30%;
    background:radial-gradient(circle at 50% 50%,
      rgba(240,207,107,0.40), rgba(212,175,55,0.16) 40%, rgba(212,175,55,0.04) 64%, transparent 80%);
    animation:smokeDrift2 38s ease-in-out infinite;
  }
  .smoke-puff.s3{
    width:74vw; height:74vw;
    left:4vw; bottom:-22vw;
    background:radial-gradient(circle at 50% 50%,
      rgba(232,150,80,0.36), rgba(212,175,55,0.14) 42%, rgba(58,23,16,0.05) 66%, transparent 82%);
    animation:smokeDrift3 46s ease-in-out infinite;
  }
  .smoke-puff.s4{
    width:50vw; height:50vw;
    left:26vw; top:56%;
    background:radial-gradient(circle at 50% 50%,
      rgba(240,207,107,0.32), rgba(212,175,55,0.12) 44%, transparent 78%);
    animation:smokeDrift1 34s ease-in-out infinite reverse;
  }
  @keyframes smokeDrift1{
    0%,100%{ transform:translate3d(0,0,0) scale(1);        opacity:.7; }
    50%    { transform:translate3d(12vw,-7vh,0) scale(1.35); opacity:1; }
  }
  @keyframes smokeDrift2{
    0%,100%{ transform:translate3d(0,0,0) scale(1.08);      opacity:.6; }
    50%    { transform:translate3d(-11vw,8vh,0) scale(1.4);  opacity:.95; }
  }
  @keyframes smokeDrift3{
    0%,100%{ transform:translate3d(0,0,0) scale(1);         opacity:.55; }
    50%    { transform:translate3d(9vw,-9vh,0) scale(1.32);  opacity:.9; }
  }

  /* ---------- HERO: paralaks + sinematik giriş ---------- */
  .motion-ok .hero-bg{ animation:none; will-change:transform; }
  .motion-ok .brand-logo{ animation:none; will-change:transform, filter; }
  .motion-ok .hero-eyebrow,
  .motion-ok .hero h1,
  .motion-ok .hero-tagline,
  .motion-ok .hero-sub{ animation:none; }

  .motion-ok .hero-content > *{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 1s cubic-bezier(.2,.8,.2,1),
               transform 1s cubic-bezier(.2,.8,.2,1);
  }
  .motion-ok .brand-logo{
    opacity:0;
    transform:translateY(24px) scale(.92);
  }
  .motion-ok .hero.hero-in .hero-content > *{ opacity:1; transform:none; }
  .motion-ok .hero.hero-in .brand-logo{ opacity:1; transform:none; }
  .motion-ok .hero.hero-in .hero-eyebrow{ transition-delay:.10s; }
  .motion-ok .hero.hero-in h1{ transition-delay:.18s; }
  .motion-ok .hero.hero-in .hero-tagline{ transition-delay:.30s; }
  .motion-ok .hero.hero-in .hero-sub{ transition-delay:.40s; }

  /* ---------- LOGO: temiz altın madalyon (her zeminde çalışır) ----------
     Ayarlanabilir: aşağıdaki değişkenleri değiştir yeter.
       --logo-size  : madalyon çapı
       --logo-zoom  : içteki videoyu yakınlaştır (alt yazıyı/boşluğu kırpar)
       --logo-ring  : altın çember rengi
       --logo-glow  : dış parıltı rengi
       --logo-y     : video dikey konumu (0=üst, 100=alt)
  */
  .brand-logo{
    --logo-size: clamp(186px, 42vw, 246px);
    --logo-zoom: 1.02;   /* 1.0 = logonun tamamı; büyütürsen alt yazı kırpılır */
    --logo-ring: rgba(240,207,107,0.90);
    --logo-glow: rgba(240,207,107,0.30);
    --logo-y: 50%;

    position:relative;
    width:var(--logo-size);
    height:var(--logo-size);
    aspect-ratio:1 / 1;
    margin:0 auto 40px;
    border-radius:50%;
    isolation:isolate;
    animation:none;                 /* eski "rise" iptal; giriş app.js/CSS ile */
  }

  /* dış sıcak parıltı — koyu leke YOK, her arka planda erir */
  .brand-logo::before{
    content:"";
    position:absolute;
    inset:-16%;
    border-radius:50%;
    background:radial-gradient(circle closest-side,
      var(--logo-glow) 0%,
      rgba(212,175,55,0.12) 48%,
      rgba(212,175,55,0.04) 68%,
      transparent 82%);
    filter:blur(7px);
    z-index:-1;
    /* eski koyu vinyet animasyonunu sıfırla, yumuşak nefese çevir */
    animation:logo-halo 6.5s ease-in-out infinite;
    transform:none;
    inset:-16%;
  }

  /* çift altın çember + zemine oturma gölgesi */
  .brand-logo::after{
    content:"";
    position:absolute;
    inset:0;
    left:0; bottom:0;
    width:auto; height:auto;
    margin:0;
    transform:none;
    filter:none;
    border-radius:50%;
    background:transparent;
    box-shadow:
      inset 0 0 0 1.5px var(--logo-ring),
      inset 0 0 16px rgba(10,13,20,0.26),
      0 0 0 5px rgba(10,13,20,0.30),
      0 0 0 6.5px rgba(212,175,55,0.42),
      0 26px 55px -16px rgba(0,0,0,0.60);
    animation:none;
    z-index:2;
    pointer-events:none;
  }

  .brand-logo-disc{
    position:absolute;
    inset:0;
    border-radius:50%;
    overflow:hidden;
    z-index:1;
    background:#0A0D14;
  }

  .brand-logo-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% var(--logo-y);
    transform:scale(var(--logo-zoom));
    -webkit-mask-image:none;
            mask-image:none;
    filter:saturate(1.06) contrast(1.03) drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    border:0;
    background:transparent;
    pointer-events:none;
  }

  .motion-ok .brand-logo{ will-change:transform, filter; }

  /* hero ışık huzmesi — yavaş nefes alan altın parıltı */
  .hero-beam{
    position:absolute;
    left:50%; top:34%;
    width:120vw; height:120vh;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    background:
      radial-gradient(ellipse 40% 32% at 50% 40%,
        rgba(240,207,107,0.16) 0%,
        rgba(212,175,55,0.06) 38%,
        transparent 70%);
    mix-blend-mode:screen;
    animation:beam 11s ease-in-out infinite;
  }
  @keyframes beam{
    0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:1;   transform:translate(-50%,-52%) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce){ .hero-beam{ animation-duration:26s; } }

  /* ---------- BÖLÜMLER ARASI SİS / IŞIK ---------- */
  .arch-divider{ position:relative; overflow:visible; }
  .arch-divider::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:min(620px, 82vw);
    height:200px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center,
      rgba(212,175,55,0.12) 0%,
      rgba(212,175,55,0.05) 42%,
      transparent 72%);
    filter:blur(34px);
    pointer-events:none;
    animation:mist 9s ease-in-out infinite;
  }
  @keyframes mist{
    0%,100%{ opacity:.45; transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:.9;  transform:translate(-52%,-50%) scale(1.12); }
  }
  @media (prefers-reduced-motion: reduce){ .arch-divider::before{ animation-duration:22s; } }

  /* bölüm üstü yumuşak ışık */
  .gates, .featured, .duas, .about-social{ position:relative; overflow:hidden; }
  .gates::before, .featured::before, .duas::before, .about-social::before{
    content:"";
    position:absolute;
    left:50%; top:-40px;
    width:min(900px, 92vw);
    height:320px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center top,
      rgba(212,175,55,0.10), transparent 68%);
    pointer-events:none;
    z-index:0;
  }
  .gates > .wrap, .featured > .wrap, .duas > .wrap, .about-social > .wrap{
    position:relative;
    z-index:1;
  }

  /* videolar bölümü: arka derinlik katmanı hafifçe sızsın */
  .featured{
    background:linear-gradient(180deg,
      var(--ink) 0%,
      rgba(10,13,20,0.90) 45%,
      var(--ink) 100%);
  }

  /* ---------- NAV: hamburger + mobil menü ---------- */
  .nav-toggle{
    display:none;
    width:42px; height:42px;
    border:1px solid var(--line);
    border-radius:6px;
    background:rgba(10,13,20,0.35);
    color:var(--parchment);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    padding:0;
  }
  .nav-toggle span{
    display:block;
    width:18px; height:1.6px;
    background:var(--gold-bright);
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav-links.open ~ .nav-toggle span:nth-child(1),
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

  @media (max-width:760px){
    .nav-toggle{ display:flex; }
    .nav-links{
      display:flex;
      position:fixed;
      inset:0;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0;
      background:rgba(8,10,16,0.97);
      backdrop-filter:blur(8px);
      transform:translateY(-100%);
      transition:transform .45s cubic-bezier(.2,.8,.2,1);
      z-index:60;
    }
    .nav-links.open{ transform:none; }
    .nav-links ul{
      flex-direction:column;
      align-items:center;
      gap:0;
    }
    .nav-links li{ margin:0; }
    .nav-links a{
      display:block;
      padding:20px 40px;
      font-size:15px;
      letter-spacing:0.22em;
      color:var(--parchment);
    }
    body.nav-open{ overflow:hidden; }
  }

  /* ---------- VİDEO ŞERİDİ (yatay kayma) ---------- */
  .rail-wrap{ position:relative; }

  .video-grid.video-rail{
    display:flex;
    grid-template-columns:none;
    gap:26px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:6px 2px 22px;
    scrollbar-width:thin;
    scrollbar-color:var(--gold-soft) transparent;
  }
  .video-grid.video-rail::-webkit-scrollbar{ height:6px; }
  .video-grid.video-rail::-webkit-scrollbar-track{ background:transparent; }
  .video-grid.video-rail::-webkit-scrollbar-thumb{
    background:var(--gold-soft);
    border-radius:20px;
  }
  .video-grid.video-rail.dragging{ scroll-snap-type:none; cursor:grabbing; }
  .video-grid.video-rail .video-card{
    flex:0 0 clamp(268px, 78vw, 340px);
    scroll-snap-align:center;
  }
  @media (min-width:900px){
    .video-grid.video-rail .video-card{ flex-basis:clamp(300px, 30vw, 348px); }
  }

  .rail-nav{
    position:absolute;
    top:calc(50% - 18px);
    transform:translateY(-50%);
    width:48px; height:48px;
    border-radius:50%;
    border:1px solid var(--gold-soft);
    background:rgba(10,13,20,0.82);
    color:var(--gold-bright);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:4;
    transition:opacity .3s ease, background .3s ease, transform .2s ease;
    backdrop-filter:blur(4px);
  }
  .rail-nav:hover{ background:rgba(212,175,55,0.16); }
  .rail-nav svg{ width:18px; height:18px; }
  .rail-nav.prev{ left:-8px; }
  .rail-nav.next{ right:-8px; }
  .rail-wrap.at-start .rail-nav.prev,
  .rail-wrap.at-end .rail-nav.next,
  .rail-wrap.no-scroll .rail-nav{
    opacity:0;
    pointer-events:none;
  }
  @media (max-width:760px){
    .rail-nav{ display:none; }
  }

  /* ---------- ALT BİLGİ: yeniden düzen + canlı sayaçlar ---------- */
  footer .footer-top{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:40px;
    align-items:start;
    text-align:left;
    padding-bottom:44px;
    margin-bottom:36px;
    border-bottom:1px solid var(--line);
  }
  footer .footer-col h4{
    font-family:'Cinzel',serif;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin:0 0 16px;
  }
  footer .footer-col a,
  footer .footer-col p{
    display:block;
    font-size:13.5px;
    color:var(--parchment-dim);
    margin:0 0 10px;
    transition:color .25s ease;
  }
  footer .footer-col a:hover{ color:var(--gold-bright); }
  footer .footer-col.right{ text-align:right; }

  footer .footer-center{ text-align:center; }
  footer .footer-center .footer-mark{ margin-bottom:8px; }
  footer .footer-live{
    display:flex;
    gap:26px;
    justify-content:center;
    margin-top:18px;
  }
  footer .footer-live .stat-num{
    font-family:'Cormorant Garamond',serif;
    font-size:21px;
    font-weight:700;
    color:var(--parchment);
    display:block;
    line-height:1.1;
  }
  footer .footer-live .stat-label{
    font-family:'Cinzel',serif;
    font-size:9px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  footer .footer-live .live-dot{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    background:#5fd08a;
    margin-right:6px;
    vertical-align:middle;
    animation:livepulse 2s ease-in-out infinite;
  }
  @keyframes livepulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }

  @media (max-width:820px){
    footer .footer-top{
      grid-template-columns:1fr;
      gap:32px;
      text-align:center;
    }
    footer .footer-col,
    footer .footer-col.right{ text-align:center; }
    footer .footer-center{ order:-1; }
  }

  /* ---------- YUKARI ÇIK ---------- */
  .to-top{
    position:fixed;
    right:22px; bottom:22px;
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid var(--gold-soft);
    background:rgba(10,13,20,0.82);
    color:var(--gold-bright);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .35s ease, transform .35s ease, background .25s ease;
    z-index:45;
    backdrop-filter:blur(4px);
  }
  .to-top.show{ opacity:1; transform:none; pointer-events:auto; }
  .to-top:hover{ background:rgba(212,175,55,0.16); }
  .to-top svg{ width:18px; height:18px; }
  @media (prefers-reduced-motion: reduce){ .to-top{transition:opacity .2s ease;} }

  /* ---------- SCROLL İLERLEME ÇUBUĞU ---------- */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:2px;
    width:0%;
    background:linear-gradient(90deg, var(--gold-soft), var(--gold-bright));
    z-index:70;
    pointer-events:none;
    transition:width .1s linear;
  }
  @media (prefers-reduced-motion: reduce){ .scroll-progress{ transition:none; } }

  /* ---------- REVEAL ÇEŞİTLERİ (data-reveal ile özelleştir) ---------- */
  .motion-ok .reveal[data-reveal="left"]  { transform:translateX(-36px); }
  .motion-ok .reveal[data-reveal="right"] { transform:translateX(36px); }
  .motion-ok .reveal[data-reveal="zoom"]  { transform:scale(.92); }
  .motion-ok .reveal[data-reveal="fade"]  { transform:none; }
  .motion-ok .reveal.is-visible[data-reveal]{ transform:none; }

  /* =================================================================
     DUYURULAR
     ================================================================= */
  .announce{ padding:20px 0 96px; position:relative; overflow:hidden; }
  .announce > .wrap{ position:relative; z-index:1; }
  .announce::before{
    content:"";
    position:absolute;
    left:50%; top:-40px;
    width:min(900px,92vw); height:320px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center top, rgba(212,175,55,0.10), transparent 68%);
    pointer-events:none;
  }
  .announce-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
  }
  .announce-card{
    position:relative;
    padding:30px 30px 26px;
    border:1px solid var(--line);
    border-radius:8px;
    background:linear-gradient(160deg, var(--ink-2), var(--ink));
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .announce-card:hover{ transform:translateY(-4px); border-color:var(--gold-soft); box-shadow:var(--shadow); }
  .announce-card.pinned{ border-color:rgba(212,175,55,0.5); }
  .announce-badge{
    position:absolute; top:-10px; left:24px;
    font-family:'Cinzel',serif; font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--ink); background:var(--gold-soft);
    padding:5px 10px; border-radius:3px;
  }
  .announce-date{
    font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft); margin-bottom:10px;
  }
  .announce-card h3{ font-size:21px; color:var(--parchment); margin-bottom:12px; line-height:1.25; }
  .announce-body{ color:var(--parchment-dim); font-size:14.5px; line-height:1.75; }
  .announce-body p{ margin:0 0 10px; }
  .announce-body p:last-child{ margin-bottom:0; }
  .announce-link{
    display:inline-block; margin-top:14px;
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-bright); border-bottom:1px solid var(--gold-soft); padding-bottom:3px;
  }

  /* =================================================================
     BLOG / HİKÂYE NOTLARI
     ================================================================= */
  .journal{ padding:20px 0 110px; position:relative; overflow:hidden; }
  .journal > .wrap{ position:relative; z-index:1; }
  .journal::before{
    content:"";
    position:absolute;
    left:50%; top:-40px;
    width:min(900px,92vw); height:320px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center top, rgba(212,175,55,0.10), transparent 68%);
    pointer-events:none;
  }
  .journal-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
  }
  .journal-card{
    display:block;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--ink-2);
    color:inherit;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .journal-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
  .journal-thumb{
    aspect-ratio:16/9;
    background-color:#0A0D14;
    background-image:
      radial-gradient(circle at 50% 40%, rgba(212,175,55,0.16), transparent 60%),
      linear-gradient(150deg, #1B2130, #0A0D14 70%);
    background-size:cover; background-position:center;
    border-bottom:1px solid var(--line);
  }
  .journal-info{ padding:20px 22px 24px; }
  .journal-date{
    font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft);
  }
  .journal-info h3{
    font-size:19px; color:var(--parchment); margin:8px 0 10px; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .journal-info p{
    font-size:13.5px; color:var(--parchment-dim); line-height:1.7; margin:0 0 12px;
    display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .journal-more{
    font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-bright);
  }
  @media (max-width:900px){ .journal-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .journal-grid{ grid-template-columns:1fr; } }

  /* =================================================================
     YAZI / ALT SAYFA  (yazi.html)
     ================================================================= */
  .article-wrap{
    max-width:760px;
    margin:0 auto;
    padding:140px 32px 100px;
  }
  .article-back{
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft); display:inline-block; margin-bottom:30px;
  }
  .article-wrap h1{
    font-size:clamp(32px, 4.4vw, 48px);
    line-height:1.15;
    margin-bottom:14px;
    color:var(--parchment);
  }
  .article-date{
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted); margin-bottom:36px; display:block;
  }
  .article-cover{
    width:100%; border-radius:8px; margin-bottom:38px;
    border:1px solid var(--line);
  }
  .article-body{ color:var(--parchment-dim); font-size:16.5px; line-height:1.85; }
  .article-body h2{ font-size:26px; color:var(--parchment); margin:38px 0 14px; }
  .article-body h3{ font-size:21px; color:var(--parchment); margin:28px 0 12px; }
  .article-body p{ margin:0 0 18px; }
  .article-body a{ color:var(--gold-bright); border-bottom:1px solid var(--gold-soft); }
  .article-body ul, .article-body ol{ margin:0 0 18px; padding-left:22px; }
  .article-body li{ margin-bottom:8px; }
  .article-body blockquote{
    margin:24px 0; padding:14px 22px;
    border-left:2px solid var(--gold-soft);
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px;
    color:var(--gold-bright);
  }
  .article-body img{ border-radius:6px; margin:22px 0; }
  .article-missing{ text-align:center; color:var(--parchment-dim); padding:60px 0; }