@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@500;600;700&display=swap');

/* =========================================================
   RESET
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html,body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
html{scroll-behavior:smooth;}

/* =========================================================
   TOKENS — ADULT (default)
========================================================= */
:root{
  --primary:#123C32;
  --primary-dark:#0C2A23;
  --secondary:#1F6B57;
  --accent:#C79A3B;
  --bg:#F7F4EC;
  --surface:#FFFFFF;
  --text:#1D2925;
  --muted:#5C6B65;
  --line:#E4DFCE;
  --tint:#DCE5DF;
  --sky:#3F7EA6;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:'Noto Naskh Arabic', serif;

  --container:1180px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(18,60,50,.06), 0 1px 1px rgba(18,60,50,.04);
  --shadow-md:0 8px 24px rgba(18,60,50,.08);
  --shadow-lg:0 16px 40px rgba(18,60,50,.14);
  --space-section:clamp(48px,8vw,96px);
}

/* =========================================================
   TOKENS — KIDS WORLD (body.kids overrides the same semantic slots)
========================================================= */
body.kids{
  --primary:#1E8E5C;        /* lively leaf green */
  --primary-dark:#146842;
  --secondary:#F2894E;      /* warm coral/sunset — replaces adult moss-green secondary */
  --accent:#E3AC3E;         /* livelier gold */
  --bg:#FFF7EA;             /* warm cream */
  --surface:#FFFFFF;
  --text:#2B3A34;
  --muted:#77857D;
  --line:#F1E1C4;
  --tint:#FDEBD6;           /* soft peach tint */
  --sky:#4FA6D8;            /* cool accent for variety, used sparingly */

  --font-display:'Baloo 2', 'Fraunda', var(--font-body);
  --shadow-sm:0 2px 6px rgba(40,60,40,.08);
  --shadow-md:0 10px 26px rgba(40,60,40,.12);
  --shadow-lg:0 18px 44px rgba(40,60,40,.16);
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--primary);line-height:1.18;letter-spacing:-0.01em;}
body.kids h1,body.kids h2,body.kids h3,body.kids h4{font-weight:700;letter-spacing:0;}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.55rem,2.6vw,2.15rem);}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);}
p{color:var(--text);}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
section{padding:var(--space-section) 0;}
.text-muted{color:var(--muted);}

.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-bottom:12px;}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--accent);display:inline-block;}
body.kids .eyebrow::before{border-radius:2px;}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
.section-head p{color:var(--muted);max-width:48ch;margin-top:8px;}

/* =========================================================
   BUTTONS
========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent);color:var(--primary-dark);}
.btn-accent:hover{filter:brightness(1.07);}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-ghost{background:var(--tint);color:var(--primary-dark);}
.btn-ghost:hover{background:var(--primary);color:#fff;}
.btn-sm{padding:9px 18px;font-size:.85rem;}
.btn-lg{padding:17px 34px;font-size:1.05rem;}
body.kids .btn{font-family:var(--font-display);font-weight:700;box-shadow:var(--shadow-sm);}
body.kids .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* =========================================================
   BADGES / SOURCE BOXES
========================================================= */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--tint);color:var(--primary-dark);border:1px solid var(--line);}
.placeholder-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#8A4A1E;background:#FBEBDD;border:1px solid #EBC9A0;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.placeholder-badge .icon{width:12px;height:12px;}
/* Responsive text: full label on desktop, short "Kaynak kontrolü" on narrow screens — single source via data attrs, no JS */
.placeholder-badge[data-full]::before{content:attr(data-full);}
@media (max-width:480px){
  .placeholder-badge[data-full]::before{content:attr(data-short);}
}

.source-block{background:var(--tint);border-left:3px solid var(--secondary);border-radius:var(--r-sm);padding:16px 18px;font-size:.85rem;color:var(--primary-dark);display:flex;flex-direction:column;gap:8px;}
.source-block .source-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary);}
.source-block strong{color:var(--primary);}

/* =========================================================
   HEADER / NAV — ADULT
========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line);}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--primary);}
.logo .mark{width:36px;height:36px;border-radius:10px;background:var(--primary);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;flex-shrink:0;}
.logo .tagline{display:block;font-family:var(--font-body);font-weight:500;font-size:.66rem;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
.nav-desktop{display:none;}
.nav-list{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.nav-link{padding:9px 13px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--text);transition:background .2s ease,color .2s ease;white-space:nowrap;}
.nav-link:hover{background:var(--tint);color:var(--primary);}
.nav-link.active{background:var(--primary);color:#fff;}
.nav-link .nl-short{display:none;}
/* Compact nav for the squeeze zone between the mobile-drawer breakpoint and full desktop width */
@media (min-width:960px) and (max-width:1199px){
  .nav-list{gap:1px;}
  .nav-link{padding:8px 9px;font-size:.83rem;}
  .nav-link .nl-full{display:none;}
  .nav-link .nl-short{display:inline;}
}
.header-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--primary);transition:background .2s ease;flex-shrink:0;}
.icon-btn:hover{background:var(--tint);}
.menu-btn{display:flex;}
.kids-link-pill{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#1E8E5C,#F2894E);color:#fff;font-weight:700;font-size:.82rem;white-space:nowrap;}
.kids-link-pill .kp-short{display:none;}
@media (max-width:420px){
  .kids-link-pill .kp-full{display:none;}
  .kids-link-pill .kp-short{display:inline;}
}

/* Mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:200;visibility:hidden;}
.mobile-nav.open{visibility:visible;}
.mobile-nav-backdrop{position:absolute;inset:0;background:rgba(12,42,35,.45);opacity:0;transition:opacity .25s ease;}
.mobile-nav.open .mobile-nav-backdrop{opacity:1;}
.mobile-nav-panel{position:absolute;top:0;right:0;height:100%;width:min(340px,86vw);background:var(--surface);padding:20px;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;gap:6px;overflow-y:auto;}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mobile-nav-link{padding:14px 12px;border-radius:var(--r-sm);font-weight:500;font-size:1rem;border-bottom:1px solid var(--line);}
.mobile-nav-link.active{color:var(--secondary);font-weight:600;}
.mobile-search{margin-top:16px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:10px 16px;}
.mobile-search input{background:none;border:none;outline:none;flex:1;font-size:.95rem;}

/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;}
.search-overlay.open{display:flex;}
.search-overlay-backdrop{position:absolute;inset:0;background:rgba(12,42,35,.5);}
.search-overlay-box{position:relative;background:var(--surface);border-radius:var(--r-lg);width:min(640px,100%);padding:28px;box-shadow:var(--shadow-lg);}
.search-overlay-close{position:absolute;top:16px;right:16px;}

/* =========================================================
   SEARCH FIELD / CHIPS
========================================================= */
.search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 10px 8px 20px;box-shadow:var(--shadow-sm);}
.search-field input{flex:1;border:none;outline:none;background:none;font-size:1rem;color:var(--text);}
.search-field input::placeholder{color:var(--muted);}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{font-size:.82rem;font-weight:500;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(18,60,50,.15);color:var(--primary-dark);}
.chip:hover{background:var(--surface);}
.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px;}
.filter-chip{padding:9px 15px;border-radius:999px;font-size:.83rem;font-weight:600;border:1.5px solid var(--line);color:var(--muted);background:var(--surface);}
.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* =========================================================
   HERO
========================================================= */
.hero{padding:clamp(48px,9vw,88px) 0 clamp(40px,6vw,64px);position:relative;overflow:hidden;isolation:isolate;}
.hero-inner{max-width:760px;position:relative;z-index:1;}
.hero p.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);margin:18px 0 0;max-width:58ch;}
.hero-search{max-width:620px;}

/* Abstract editorial hero illustration — no photos/clipart, thin radiating arcs */
.hero-illustration{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-illustration svg{position:absolute;top:-8%;right:-6%;width:min(64vw,780px);height:auto;opacity:1;}
@media (max-width:719px){.hero-illustration svg{width:120vw;top:-4%;right:-38%;opacity:.8;}}

/* Standalone search section (below hero) */
.search-section{padding:0 0 var(--space-section);}
.search-section-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-sm);}
.search-section .eyebrow{margin-bottom:14px;}

/* ==== Featured "Bugünün Animasyonu" block — a differentiator, not a plain video card ==== */
.featured-animation{
  display:grid;grid-template-columns:1fr;gap:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-radius:var(--r-xl);overflow:hidden;color:#fff;position:relative;
}
.featured-animation .fa-visual{
  aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%,rgba(199,154,59,.35),transparent 60%),radial-gradient(circle at 75% 70%,rgba(31,107,87,.5),transparent 55%);
}
.featured-animation .fa-visual .play-ring{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;}
.featured-animation .fa-visual .play-ring .play-dot{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--primary);}
.featured-animation .fa-badges{position:absolute;top:16px;left:16px;display:flex;gap:8px;}
.fa-tag{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
.fa-tag.new{background:var(--accent);color:var(--primary-dark);}
.fa-tag.original{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);}
.featured-animation .fa-duration{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.35);color:#fff;font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:6px;}
.featured-animation .fa-body{padding:clamp(24px,4vw,36px);}
.featured-animation .fa-eyebrow{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.featured-animation h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);max-width:14ch;}
.featured-animation p{color:rgba(255,255,255,.78);margin-top:12px;max-width:46ch;}
.featured-animation .fa-series{display:inline-block;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.6);}
.featured-animation .btn{margin-top:22px;}

/* ==== Homepage "Çocuklar Dünyası" showcase (adult page, kids-flavored island) ==== */
.kids-showcase{
  background:linear-gradient(180deg,#FFF7EA,var(--bg) 85%);
  border:1.5px solid #F1E1C4;border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;
}
.kids-showcase-head{text-align:center;max-width:52ch;margin:0 auto 30px;position:relative;}
.kids-showcase-head .kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #F1E1C4;padding:6px 16px;border-radius:999px;font-weight:700;font-size:.8rem;color:#1E8E5C;margin-bottom:14px;}
.kids-showcase-head h2{font-family:'Baloo 2',var(--font-display);color:#146842;}
.kids-showcase-head p{font-family:'Baloo 2',var(--font-display);font-weight:600;color:#F2894E;font-size:1.05rem;margin-top:8px;}
.kids-mini-age-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:820px;margin:0 auto;}
.kids-mini-age-card{background:#fff;border:2px solid #F1E1C4;border-radius:22px;padding:22px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.kids-mini-age-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(40,60,40,.12);border-color:#F2894E;}
.kids-mini-age-card .emoji{font-size:2.1rem;}
.kids-mini-age-card .range{font-family:'Baloo 2',var(--font-display);font-weight:800;color:#146842;font-size:1.1rem;}
.kids-mini-age-card .desc{font-size:.8rem;color:#77857D;}
.kids-showcase-cta{text-align:center;margin-top:26px;}

/* =========================================================
   DAILY CARDS
========================================================= */
.daily-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.daily-card{background:var(--surface);border-radius:var(--r-lg);padding:26px;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;}
.daily-card .card-label{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--secondary);}
.daily-card .card-label .icon{width:16px;height:16px;}
.daily-card .arabic-text{font-family:var(--font-arabic);font-size:1.35rem;line-height:2.1;direction:rtl;color:var(--primary-dark);}
.daily-card .translation{font-size:.96rem;}
.daily-card .source-line{font-size:.8rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}

/* =========================================================
   CARDS — category / topic / article / video / animation
========================================================= */
.category-grid,.topic-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:480px){.category-grid,.topic-grid{grid-template-columns:repeat(2,1fr);}}
.category-card,.topic-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.category-card:hover,.topic-card:hover{border-color:var(--secondary);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.category-card .icon-wrap,.topic-card .icon-wrap{width:44px;height:44px;border-radius:var(--r-sm);background:var(--tint);color:var(--primary);display:flex;align-items:center;justify-content:center;}
.category-card h3,.topic-card h3{font-size:1.03rem;}
.category-card p,.topic-card p{font-size:.87rem;color:var(--muted);}
.card-link{font-size:.84rem;font-weight:700;color:var(--secondary);display:inline-flex;align-items:center;gap:6px;margin-top:auto;}
.card-link .icon{width:15px;height:15px;}

.article-grid{display:grid;grid-template-columns:1fr;gap:22px;}
.article-card{background:var(--surface);border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease;}
.article-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.article-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--tint),var(--bg));display:flex;align-items:center;justify-content:center;color:var(--secondary);position:relative;}
.article-card .thumb .icon{width:32px;height:32px;}
.article-card .card-body{padding:19px;display:flex;flex-direction:column;gap:9px;flex:1;}
.category-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-dark);background:var(--tint);padding:4px 10px;border-radius:999px;}
.article-card h3{font-size:1.05rem;}
.meta-line{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);flex-wrap:wrap;}

/* video/animation cards */
.video-card{background:var(--surface);border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;}
.video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.video-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary),var(--secondary));position:relative;display:flex;align-items:center;justify-content:center;}
.video-card .thumb .play{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--primary);display:flex;align-items:center;justify-content:center;}
.video-card .thumb .play .icon{width:20px;height:20px;stroke-width:0;fill:currentColor;}
.video-card .duration{position:absolute;bottom:8px;right:8px;background:rgba(12,42,35,.75);color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:6px;}
.video-card .format-tag{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);color:var(--primary-dark);font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.video-card .original-tag{position:absolute;top:8px;right:8px;background:var(--accent);color:var(--primary-dark);font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.episode-tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;font-weight:600;color:var(--secondary);letter-spacing:.02em;}
.video-card .card-body{padding:16px;display:flex;flex-direction:column;gap:8px;}
.video-card h3{font-size:.98rem;}

/* animation series strip */
.series-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;}
.series-chip{flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.85rem;font-weight:600;color:var(--primary-dark);display:flex;align-items:center;gap:8px;}
.series-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}

/* =========================================================
   GUIDE / Q&A ACCORDION ("Hayatın İçinden")
========================================================= */
.guide-list{display:flex;flex-direction:column;gap:10px;}
.guide-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.guide-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;text-align:left;font-weight:600;font-size:.97rem;color:var(--primary);}
.guide-question .icon{transition:transform .25s ease;color:var(--secondary);}
.guide-item.open .guide-question .icon{transform:rotate(45deg);}
.guide-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.guide-answer-inner{padding:0 22px 20px;color:var(--muted);font-size:.9rem;}
.guide-item.open .guide-answer{max-height:280px;}

/* =========================================================
   MOST-READ
========================================================= */
.most-read-list{display:flex;flex-direction:column;}
.most-read-item{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);}
.most-read-item .rank{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--accent);width:38px;flex-shrink:0;}
.most-read-item h4{font-size:.98rem;font-weight:600;color:var(--primary);}

/* =========================================================
   BREADCRUMB / PAGE HEADER
========================================================= */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--muted);padding:18px 0 0;}
.breadcrumb .sep{color:var(--line);}
.breadcrumb .current{color:var(--primary);font-weight:500;}
.page-header{padding:26px 0 var(--space-section);}
.page-header p.lead{color:var(--muted);max-width:62ch;margin-top:12px;font-size:1.03rem;}

/* =========================================================
   QURAN READER
========================================================= */
.quran-layout{display:grid;grid-template-columns:1fr;gap:26px;align-items:start;}
.surah-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.surah-list{max-height:560px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.surah-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);font-size:.9rem;}
.surah-item:hover{background:var(--bg);}
.surah-item.active{background:var(--tint);}
.surah-item .num{width:29px;height:29px;border-radius:8px;background:var(--bg);color:var(--secondary);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.surah-item .name .tr{display:block;font-weight:600;color:var(--primary);}
.surah-item .name .meta{display:block;font-size:.74rem;color:var(--muted);}
.surah-item .ar{font-family:var(--font-arabic);font-size:1.05rem;color:var(--primary-dark);}
.reader-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,38px);}
.reader-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.ayah-block{padding:22px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:13px;}
.ayah-block:first-of-type{padding-top:0;}
.ayah-number-row{display:flex;align-items:center;gap:10px;}
.ayah-number{width:27px;height:27px;border-radius:999px;background:var(--tint);color:var(--primary);font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ayah-block.current-ayah{background:var(--tint);border-radius:var(--r-md);margin:0 -16px;padding:22px 16px;}

/* Ayet navigation bar — prototype-level UX, no real API pagination yet */
.ayet-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;margin-top:22px;}
.ayet-nav-bar .anb-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--primary);background:var(--surface);border:1px solid var(--line);}
.ayet-nav-bar .anb-btn:hover{background:var(--tint);}
.ayet-nav-bar .anb-btn:disabled{opacity:.4;cursor:not-allowed;}
.ayet-nav-bar .anb-goto{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);}
.ayet-nav-bar .anb-goto input{width:52px;text-align:center;padding:7px 4px;border-radius:8px;border:1px solid var(--line);background:var(--surface);}
.ayah-block .arabic-text{font-family:var(--font-arabic);font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:2.2;direction:rtl;text-align:right;color:var(--primary-dark);}
.tafsir-toggle{align-self:flex-start;font-size:.8rem;font-weight:600;color:var(--secondary);display:inline-flex;align-items:center;gap:6px;}
.tafsir-box{background:var(--bg);border-radius:var(--r-sm);padding:14px 16px;font-size:.87rem;color:var(--muted);display:none;}
.ayah-block.tafsir-open .tafsir-box{display:block;}

/* =========================================================
   HADITH
========================================================= */
.hadith-list{display:flex;flex-direction:column;gap:16px;}
.hadith-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;transition:box-shadow .2s ease;}
.hadith-card:hover{box-shadow:var(--shadow-md);}
.hadith-card .topic-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);margin-bottom:12px;display:inline-block;}
.hadith-card blockquote{font-family:var(--font-display);font-size:1.08rem;font-weight:500;color:var(--primary);line-height:1.55;margin-bottom:14px;}
.hadith-detail-arabic{font-family:var(--font-arabic);font-size:1.5rem;line-height:2.1;direction:rtl;text-align:right;color:var(--primary-dark);background:var(--tint);border-radius:var(--r-md);padding:22px;margin:20px 0;}

/* Kaynak vs Sıhhat — two visually distinct blocks, never merged into one sentence */
.source-rows{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.source-row{display:flex;gap:10px;font-size:.86rem;padding:6px 0;border-bottom:1px dashed var(--line);}
.source-row:last-child{border-bottom:none;}
.source-row .k{flex:0 0 150px;font-weight:600;color:var(--primary-dark);}
.source-row .v{color:var(--text);}
.sihhat-block{border-left-color:var(--accent);background:#FBF2E0;}
.sihhat-block .source-title{color:#8A6A1E;}

/* =========================================================
   ARTICLE DETAIL
========================================================= */
.article-title{margin:16px 0 18px;max-width:22ch;}
.article-meta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);padding-bottom:22px;}
.author-chip{display:flex;align-items:center;gap:10px;}
.author-avatar{width:33px;height:33px;border-radius:999px;background:var(--tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;}
.article-cover{aspect-ratio:21/9;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);margin-bottom:var(--space-section);}
.article-cover .icon{width:44px;height:44px;}
.article-layout{display:grid;grid-template-columns:1fr;gap:44px;}
.article-body{max-width:66ch;font-size:1.04rem;}
.article-body p{margin-bottom:19px;}
.article-body h2{margin:36px 0 15px;}
.citation-block{background:var(--tint);border-radius:var(--r-md);padding:22px 24px;margin:26px 0;display:flex;flex-direction:column;gap:11px;}
.citation-block .arabic-text{font-family:var(--font-arabic);font-size:1.45rem;line-height:2.1;direction:rtl;text-align:right;color:var(--primary-dark);}
.citation-block cite{font-style:normal;font-size:.8rem;font-weight:700;color:var(--primary);}
.share-row{display:flex;align-items:center;gap:10px;padding:26px 0;margin:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sidebar{display:flex;flex-direction:column;gap:22px;}
.sidebar-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;}
.sidebar-box h4{font-size:.93rem;margin-bottom:13px;}
.toc-list{display:flex;flex-direction:column;gap:9px;font-size:.87rem;}
.toc-list a{color:var(--muted);}
.related-grid{display:grid;grid-template-columns:1fr;gap:18px;}

/* =========================================================
   SEARCH RESULTS (grouped)
========================================================= */
.results-group{margin-bottom:40px;}
.results-group-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.results-group-head .icon-wrap{width:34px;height:34px;border-radius:9px;background:var(--tint);color:var(--primary);display:flex;align-items:center;justify-content:center;}
.results-group-head h3{font-size:1.05rem;}
.results-group-head .count{font-size:.78rem;color:var(--muted);background:var(--bg);padding:3px 9px;border-radius:999px;}
.result-row{display:flex;gap:14px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);align-items:flex-start;}
.result-row + .result-row{margin-top:8px;}
.result-row .icon-wrap{width:30px;height:30px;border-radius:8px;background:var(--tint);color:var(--secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.result-row .r-title{font-weight:600;color:var(--primary);font-size:.92rem;}
.result-row .r-snippet{font-size:.85rem;color:var(--muted);margin-top:3px;}

/* =========================================================
   FOOTER — ADULT
========================================================= */
.site-footer{background:var(--primary-dark);color:rgba(255,255,255,.7);padding:56px 0 28px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand .logo{color:#fff;}
.footer-brand .logo .mark{background:var(--accent);color:var(--primary-dark);}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:14px;max-width:40ch;}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s ease,color .2s ease;}
.footer-social a:hover{background:var(--accent);color:var(--primary-dark);}
.footer-social a .icon{width:18px;height:18px;}
.footer-col h5{color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.88rem;color:rgba(255,255,255,.65);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.5);}
.footer-kids-cta{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border-radius:var(--r-md);padding:16px 20px;margin-top:24px;}
.footer-kids-cta a{margin-left:auto;}

/* =========================================================
   KIDS WORLD — layout shell
========================================================= */
body.kids .site-header{background:var(--bg);}
body.kids .logo .mark{background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:14px;}
body.kids .nav-link.active{background:var(--primary);}

.kids-hero{padding:clamp(40px,8vw,80px) 0 40px;text-align:center;position:relative;overflow:hidden;}
.kids-hero .kids-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);padding:8px 18px;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--primary);margin-bottom:20px;box-shadow:var(--shadow-sm);}
.kids-hero h1{font-size:clamp(2.1rem,6vw,3.4rem);max-width:14ch;margin:0 auto;}
.kids-hero .kids-motto{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--secondary);margin-top:14px;}
.kids-hero p.lead{max-width:48ch;margin:16px auto 0;color:var(--muted);font-size:1.05rem;}
.kids-blobs{position:absolute;inset:0;pointer-events:none;z-index:-1;}
.kids-blobs span{position:absolute;border-radius:50%;opacity:.35;filter:blur(2px);}

.age-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:920px;margin:44px auto 0;}
.age-card{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:30px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.age-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-lg);border-color:var(--secondary);}
.age-card .age-emoji{font-size:2.6rem;line-height:1;}
.age-card .age-range{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--primary);}
.age-card .age-desc{font-size:.86rem;color:var(--muted);}
.age-card.mid{border-color:var(--accent);background:linear-gradient(180deg,var(--tint),var(--surface));}
.age-card .pilot-badge{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--secondary);padding:4px 10px;border-radius:999px;}

/* Returning-user shortcut banner on the age-picker page */
.returning-banner{max-width:520px;margin:0 auto 28px;background:var(--surface);border:2px solid var(--secondary);border-radius:20px;padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;}
.returning-banner p{font-size:.9rem;font-weight:600;color:var(--primary);}
.returning-banner p span{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin-top:2px;}

/* "Yakında" (coming soon) age-world page */
.soon-card{max-width:560px;margin:36px auto 0;background:var(--surface);border:2px dashed var(--line);border-radius:28px;padding:44px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.soon-card .soon-emoji{font-size:3.4rem;}
.soon-card h1{color:var(--primary);font-size:clamp(1.55rem,2.6vw,2.15rem);}
.soon-card p{color:var(--muted);}

.kids-icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.kids-icon-card{background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:24px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease;}
.kids-icon-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.kids-icon-card .emoji{font-size:2.2rem;}
.kids-icon-card h3{font-size:1rem;}
.kids-icon-card p{font-size:.78rem;color:var(--muted);}

.kids-mascot-strip{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--tint),var(--surface));border-radius:var(--r-lg);padding:22px 26px;border:1.5px solid var(--line);}
.kids-mascot-strip .mascot-avatar{width:64px;height:64px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0;box-shadow:var(--shadow-sm);}
.kids-mascot-strip p{font-size:.92rem;color:var(--primary-dark);font-weight:600;}

/* kids video/story card */
.kids-video-card{background:var(--surface);border:2px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
.kids-video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.kids-video-card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;position:relative;}
.kids-video-card .thumb .emoji{font-size:2.6rem;}
.kids-video-card .thumb .play{position:absolute;bottom:10px;right:10px;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.kids-video-card .card-body{padding:16px;}
.kids-video-card .series-name{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--secondary);}
.kids-video-card h3{font-size:1rem;margin-top:4px;}

.kids-grid-3{display:grid;grid-template-columns:1fr;gap:18px;}

/* reward stamp */
.stamp{display:inline-flex;align-items:center;gap:8px;background:var(--tint);border:2px dashed var(--secondary);border-radius:16px;padding:10px 16px;font-weight:700;color:var(--primary-dark);font-size:.88rem;}

/* quiz */
.quiz-card{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow-sm);}
.quiz-progress{display:flex;gap:6px;margin-bottom:22px;}
.quiz-progress span{flex:1;height:8px;border-radius:999px;background:var(--line);}
.quiz-progress span.done{background:var(--secondary);}
.quiz-options{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.quiz-option{border:2px solid var(--line);border-radius:16px;padding:15px 18px;font-weight:600;font-size:.96rem;text-align:left;background:var(--surface);transition:all .15s ease;}
.quiz-option:hover{border-color:var(--secondary);background:var(--tint);}
.quiz-option.correct{border-color:var(--primary);background:var(--tint);color:var(--primary-dark);}
.quiz-option.wrong{border-color:var(--secondary);opacity:.5;}

/* namaz steps */
.step-list{display:flex;flex-direction:column;gap:0;}
.step-item{display:flex;gap:18px;padding:20px 0;border-bottom:1px dashed var(--line);}
.step-item:last-child{border-bottom:none;}
.step-num{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-item h4{font-size:1rem;color:var(--primary);}
.step-item p{font-size:.88rem;color:var(--muted);margin-top:4px;}

/* activity/etkinlik */
.activity-card{background:var(--surface);border:2px dashed var(--secondary);border-radius:24px;padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.activity-card .emoji{font-size:3rem;}

/* kids mobile bottom nav */
.kids-tabbar{display:none;}

/* =========================================================
   CHARACTER CONCEPT PAGE
========================================================= */
.concept-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.concept-card{border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);}
.concept-visual{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:24px;}
.concept-visual.a{background:linear-gradient(135deg,#DCE5DF,#F7F4EC);}
.concept-visual.b{background:linear-gradient(135deg,#FDEBD6,#FFF7EA);}
.concept-avatar{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:var(--shadow-sm);}
.concept-body{padding:24px;}
.concept-body .concept-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary);}
.verdict-box{background:var(--tint);border-radius:var(--r-md);padding:22px 24px;margin-top:8px;}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width:640px){
  .kids-icon-grid{grid-template-columns:repeat(3,1fr);}
  .age-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:720px){
  .category-grid,.topic-grid{grid-template-columns:repeat(3,1fr);}
  .daily-grid{grid-template-columns:repeat(3,1fr);}
  .article-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:repeat(3,1fr);}
  .kids-grid-3{grid-template-columns:repeat(3,1fr);}
  .concept-grid{grid-template-columns:repeat(2,1fr);}
  .kids-mini-age-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:860px){
  .featured-animation{grid-template-columns:1.1fr 1fr;align-items:stretch;}
  .featured-animation .fa-visual{aspect-ratio:auto;height:100%;}
}
@media (min-width:960px){
  .nav-desktop{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;}
  .menu-btn{display:none;}
  .article-layout{grid-template-columns:2.2fr 1fr;}
  .quran-layout{grid-template-columns:320px 1fr;}
  .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);}
  .article-grid.wide{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:719px){
  body.kids{padding-bottom:74px;}
  .kids-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.06);padding:8px 6px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;}
  .kids-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;font-weight:700;color:var(--muted);padding:4px 8px;border-radius:12px;}
  .kids-tabbar a.active{color:var(--primary);background:var(--tint);}
  .kids-tabbar .emoji{font-size:1.3rem;}
}