/* =========================================================
   KADRI — DLE (DataLife Engine) theme stylesheet
   გადმოტანილია მოწოდებული HTML დიზაინიდან
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700&family=Noto+Serif+Georgian:wght@500;600;700&display=swap');

:root{
  --radius: .45rem;

  --background: oklch(10% .008 265);
  --foreground: oklch(95.5% .008 90);

  --card: oklch(14% .01 265);
  --card-foreground: oklch(95.5% .008 90);

  --popover: oklch(17% .012 265);
  --popover-foreground: oklch(95.5% .008 90);

  --primary: oklch(62% .20 255);
  --primary-foreground: oklch(98% .005 90);

  --secondary: oklch(18% .012 265);
  --secondary-foreground: oklch(92% .007 90);

  --muted: oklch(20% .01 265);
  --muted-foreground: oklch(67% .015 265);

  --accent: oklch(25% .016 265);
  --accent-foreground: oklch(97% .006 90);

  --destructive: oklch(58% .22 25);
  --destructive-foreground: oklch(98% .005 90);

  --border: oklch(28% .012 265 / .78);
  --input: oklch(28% .012 265);
  --ring: oklch(62% .20 255);
  --rating: oklch(82% .16 83);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:"Noto Sans Georgian", sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input{ font-family:inherit; }

.font-display{
  font-family:"Noto Serif Georgian", serif;
}

/* ---------- layout ---------- */
.site-container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 1.25rem;
}
@media (min-width:768px){ .site-container{ padding:0 2rem; } }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background:color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter:blur(20px);
}
.site-header .site-container{
  display:flex; align-items:center; gap:1.5rem; height:72px;
}
.site-logo{
  font-family:"Noto Serif Georgian", serif;
  font-size:1.45rem; font-weight:700; letter-spacing:.12em; white-space:nowrap;
}
.site-logo span{ color:var(--primary); }

.main-nav{ display:none; align-items:center; gap:1.75rem; }
@media (min-width:768px){ .main-nav{ display:flex; } }
.nav-link{
  font-size:.9rem; font-weight:500; color:var(--muted-foreground);
  position:relative; padding:.5rem 0; transition:color .15s ease;
}
.nav-link:hover{ color:var(--foreground); }
.nav-link-active{ color:var(--foreground); }
.nav-link-active:after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--primary); border-radius:2px;
}

.header-search{ margin-left:auto; display:none; width:100%; max-width:290px; }
@media (min-width:768px){ .header-search{ display:block; } }
.search-wrap{ position:relative; }
.search-wrap svg{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted-foreground); pointer-events:none;
}
.search-input{
  width:100%; height:2.5rem; border-radius:var(--radius);
  border:1px solid var(--border); background:color-mix(in oklab, var(--secondary) 70%, transparent);
  color:var(--foreground); padding:0 .75rem 0 2.5rem; font-size:.875rem;
  outline:none; transition:box-shadow .15s ease;
}
.search-input::placeholder{ color:var(--muted-foreground); }
.search-input:focus{ box-shadow:0 0 0 2px var(--primary), 0 0 15px rgba(12,132,250,.25); }

.burger-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:var(--radius); border:none;
  background:transparent; color:var(--foreground); cursor:pointer;
}
@media (min-width:768px){ .burger-btn{ display:none; } }

/* ---------- hero ---------- */
.hero-stage{
  position:relative; height:420px; border-radius:1rem; overflow:hidden;
  margin-top:1.25rem;
}
@media (min-width:768px){ .hero-stage{ height:540px; } }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero-slide-active{ opacity:1; position:relative; }
.hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade{
  background:linear-gradient(to top, var(--background) 5%, color-mix(in oklab, var(--background) 40%, transparent) 55%, transparent 100%),
             linear-gradient(to right, color-mix(in oklab, var(--background) 60%, transparent) 0%, transparent 55%);
}
.hero-slide .hero-body{
  position:relative; z-index:10; display:flex; height:100%; max-width:640px;
  flex-direction:column; justify-content:flex-end;
  padding:1.5rem 1.5rem 5rem; 
}
@media (min-width:768px){ .hero-slide .hero-body{ padding:4rem 4rem 4rem; } }
.hero-kicker{ display:flex; align-items:center; gap:.75rem; font-size:.75rem; font-weight:600; color:var(--primary); margin-bottom:1rem; }
.hero-kicker span{ width:2rem; height:1px; background:var(--primary); display:inline-block; }
.hero-title{ font-size:2.25rem; font-weight:700; line-height:1.1; margin:0; }
@media (min-width:768px){ .hero-title{ font-size:3.5rem; } }
.hero-subtitle{ margin:.25rem 0 0; font-size:1.25rem; color:color-mix(in oklab, var(--foreground) 75%, transparent); }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.25rem; font-size:.875rem; color:color-mix(in oklab, var(--foreground) 75%, transparent); }
.meta-dot{ width:3px; height:3px; border-radius:50%; background:var(--border); display:inline-block; }
.rating-pill{ display:inline-flex; align-items:center; gap:.25rem; color:var(--rating); font-weight:600; }
.hero-desc{ display:none; max-width:36rem; margin-top:1.25rem; font-size:.9rem; line-height:1.7; color:color-mix(in oklab, var(--foreground) 70%, transparent); }
@media (min-width:640px){ .hero-desc{ display:block; } }
.hero-actions{ display:flex; align-items:center; gap:.75rem; margin-top:1.75rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--radius); font-size:.9rem; font-weight:600; cursor:pointer;
  height:2.75rem; padding:0 1.5rem; border:none; transition:all .15s ease;
}
.btn-primary{ background:var(--primary); color:var(--primary-foreground); box-shadow:0 4px 10px rgba(12,132,250,.25); }
.btn-primary:hover{ background:color-mix(in oklab, var(--primary) 90%, black); }
.btn-ghost{
  border:1px solid color-mix(in oklab, var(--foreground) 20%, transparent);
  background:color-mix(in oklab, var(--background) 20%, transparent);
  color:var(--foreground); backdrop-filter:blur(8px); padding:0 1.25rem;
}
.hero-controls{ position:absolute; right:1.25rem; bottom:1.25rem; z-index:20; display:flex; align-items:center; gap:.5rem; }
.hero-counter{ margin-right:.5rem; font-family:monospace; font-size:.75rem; color:color-mix(in oklab, var(--foreground) 70%, transparent); display:none; }
@media (min-width:640px){ .hero-counter{ display:inline; } }
.hero-control{
  width:2.25rem; height:2.25rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--background);
  color:var(--foreground); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.hero-control:hover{ background:var(--accent); }

/* ---------- section headings ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.section-kicker{ display:flex; align-items:center; gap:.5rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--primary); margin-bottom:.5rem; }
.section-kicker span{ width:1.25rem; height:1px; background:var(--primary); display:inline-block; }
.section-title{ font-size:1.5rem; font-weight:600; margin:0; }
@media (min-width:768px){ .section-title{ font-size:1.875rem; } }
.section-action{ display:none; align-items:center; gap:.25rem; font-size:.875rem; color:var(--primary); }
@media (min-width:640px){ .section-action{ display:inline-flex; } }
.section-action:hover{ text-decoration:underline; }

/* ---------- filter tabs ---------- */
.filter-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.filter-tab{
  border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab, var(--card) 80%, transparent);
  color:var(--muted-foreground); font-size:.8rem; font-weight:500; padding:.4rem 1rem; cursor:pointer;
}
.filter-tab.active-tab{ background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }

/* ---------- poster grid / movie card ---------- */
.poster-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:640px){ .poster-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:768px){ .poster-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:1024px){ .poster-grid{ grid-template-columns:repeat(6, 1fr); } }

.movie-card{
  cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.movie-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px -8px rgba(0,0,0,.5), 0 0 20px -5px rgba(12,132,250,.3);
}
.movie-poster{
  position:relative; aspect-ratio:2/3; width:100%; overflow:hidden;
  border-radius:.6rem; background:var(--muted);
}
.movie-poster img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.movie-card:hover .movie-poster img{ transform:scale(1.05); }
.movie-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 45%, transparent 75%);
}
.movie-tags{ position:absolute; left:.6rem; top:.6rem; z-index:10; display:flex; gap:.35rem; }
.movie-tag{
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px); color:var(--foreground);
  font-size:.65rem; font-weight:700; padding:.1rem .45rem; border-radius:.3rem;
}
.movie-tag-accent{ background:var(--primary); color:var(--primary-foreground); }
.movie-meta{ position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:10; display:flex; align-items:center; justify-content:space-between; font-size:.75rem; }
.movie-meta .rating{ display:flex; align-items:center; gap:.2rem; font-weight:600; color:var(--rating); }
.movie-title{ margin:.7rem 0 0; font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.movie-sub{ margin:.2rem 0 0; font-size:.75rem; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- pagination ---------- */
.dle-pagination{ display:flex; flex-wrap:wrap; gap:.4rem; margin:2rem 0; justify-content:center; }
.dle-pagination a, .dle-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem; padding:0 .6rem; border-radius:var(--radius);
  border:1px solid var(--border); font-size:.85rem; color:var(--foreground);
}
.dle-pagination span.pnavigat, .dle-pagination a.pnavigat-active{
  background:var(--primary); color:var(--primary-foreground); border-color:var(--primary);
}

/* ---------- full story page ---------- */
.story-hero{ position:relative; border-radius:1rem; overflow:hidden; min-height:340px; margin-top:1.25rem; }
.story-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6); }
.story-hero .hero-shade{ position:absolute; inset:0; }
.story-hero .hero-body{ position:relative; z-index:5; padding:2rem 1.5rem; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-height:340px; }
.story-layout{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2rem; }
@media (min-width:900px){ .story-layout{ grid-template-columns:260px 1fr; } }
.story-poster{ border-radius:.75rem; overflow:hidden; border:1px solid var(--border); }
.story-facts{ margin-top:1rem; border:1px solid var(--border); border-radius:.75rem; padding:1rem; background:var(--card); font-size:.85rem; }
.story-facts dt{ color:var(--muted-foreground); }
.story-facts dd{ margin:0 0 .6rem; }
.story-desc{ font-size:.95rem; line-height:1.8; color:color-mix(in oklab, var(--foreground) 90%, transparent); }
.story-body h2{ font-family:"Noto Serif Georgian", serif; }
.player-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:.75rem; overflow:hidden; background:#000; margin-bottom:1.5rem; }
.player-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- quick preview modal ---------- */
.qp-modal{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:1rem; opacity:0; pointer-events:none; transition:opacity .3s ease;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
}
.qp-modal.is-open{ opacity:1; pointer-events:auto; }
.qp-card{
  position:relative; width:100%; max-width:640px; overflow:hidden; border-radius:1rem;
  border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background:var(--card); box-shadow:0 25px 60px rgba(0,0,0,.5);
  transform:scale(.95); transition:transform .3s ease;
}
.qp-modal.is-open .qp-card{ transform:scale(1); }
.qp-close{
  position:absolute; right:1rem; top:1rem; z-index:20; width:2.25rem; height:2.25rem;
  border-radius:999px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--background) 80%, transparent); color:var(--muted-foreground); backdrop-filter:blur(6px);
}

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--border); background:var(--card); }
.site-footer .site-container{ display:flex; flex-direction:column; gap:2rem; padding:2.5rem 0; }
@media (min-width:640px){ .site-footer .site-container{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.5rem 1rem; font-size:.875rem; color:var(--muted-foreground); }
.footer-links a:hover{ color:var(--foreground); }