/* Halk Film, Site 1: bütün sayfaların ortak stili.
   Yazı tipleri, temel ayarlar, üst bar, açılır menü ve alt bilgi burada.
   Sayfa türüne özel stiller: anasayfa.css, liste.css, film.css, sayfa.css. */

:root{
  --bg:#ffffff;
  --ink:#141414;
  --text:#2f2f2f;        /* uzun metin */
  --muted:#6b6b6b;       /* ikincil bilgi */
  --line:rgba(20,20,20,0.12);
  --field:#efefec;       /* arama, sıralama gibi alanların zemini */
  --radius:6px;
  --bar-h:88px;
  --serif:'Young Serif', Georgia, 'Times New Roman', serif;
  --sans:'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{
  overflow-x:hidden;
  font-synthesis:none;           /* Young Serif tek ağırlık: sahte kalınlık üretilmesin */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; }

button, input, select, textarea{ font:inherit; color:inherit; }

::selection{ background:var(--ink); color:#ffffff; }

/* Yapışkan üst bar, bağlantı hedeflerinin üstünü örtmesin */
[id]{ scroll-margin-top:calc(var(--bar-h) + 24px); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- Üst bar ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  height:var(--bar-h);
  padding:0 56px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

.logo{
  display:block;
  line-height:0;
}

.logo img{
  display:block;
  width:auto;
  height:46px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:500;
}

.nav-item{ position:relative; }

.nav-trigger,
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:8px 0;
  border:0;
  background:none;
  font:inherit;
  color:var(--ink);
  cursor:pointer;
}

.nav-trigger svg{
  width:10px;
  height:6px;
  transition:transform .15s ease;
}

.nav-item:hover .nav-trigger svg,
.nav-item:focus-within .nav-trigger svg{ transform:rotate(180deg); }

.nav-item.active .nav-trigger::after,
.nav-link.active::after,
.nav-link:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--ink);
}

.nav-link:hover::after{ height:1px; }
.nav-link.active:hover::after{ height:2px; }

/* Açılır menü: fareyle üstüne gelince ya da dokununca (odak) açılır */
.dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  min-width:220px;
  padding:8px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 40px -20px rgba(0,0,0,0.28);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, -6px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index:50;
}

/* düğme ile menü arasındaki boşlukta fare menüden kopmasın */
.dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-14px;
  height:14px;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}

.dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:4px;
  font-size:15px;
  font-weight:400;
  white-space:nowrap;
  color:var(--ink);
}

.dropdown a:hover,
.dropdown a:focus-visible{
  background:var(--field);
  outline:none;
}

.dropdown a[aria-current="page"]{ font-weight:600; }

/* ---------- Alt bilgi ---------- */

.site-footer{
  margin-top:auto;
  background:#0e0e10;
  color:rgba(255,255,255,0.72);
}

.footer-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:72px 56px 56px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:64px;
  align-items:start;
}

.footer-logo{
  display:inline-block;
  line-height:0;
}

.footer-logo img{
  display:block;
  width:auto;
  height:34px;
}

.footer-motto{
  margin:14px 0 0;
  max-width:280px;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.5;
  color:rgba(255,255,255,0.6);
}

.footer-nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(150px, auto));
  gap:56px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-col h3{
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
  color:#ffffff;
}

.footer-col a{
  width:fit-content;
  font-size:15px;
  line-height:1.45;
  color:rgba(255,255,255,0.72);
  transition:color .15s ease;
}

.footer-col a:hover{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-col a:focus-visible,
.footer-logo:focus-visible{ outline-color:#ffffff; }

.footer-base{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:22px 56px 36px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 28px;
  font-size:13.5px;
  color:rgba(255,255,255,0.45);
}

.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 24px; }
.footer-legal a{ color:rgba(255,255,255,0.62); transition:color .15s; }
.footer-legal a:hover{ color:#ffffff; }
.footer-legal a[aria-current="page"]{ color:#ffffff; }

/* ---------- Dar ekranlar ---------- */

@media (max-width:960px){
  .topbar{ padding:0 28px; }
  .footer-inner{ grid-template-columns:minmax(0, 1fr); gap:48px; padding:60px 28px 44px; }
  .footer-nav{ gap:36px; }
  .footer-base{ padding:22px 28px 36px; }
}

@media (max-width:600px){
  :root{ --bar-h:104px; }
  .topbar{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
  }
  .logo img{ height:34px; }
  .nav-links{ gap:26px; font-size:15px; }
  .dropdown{ min-width:200px; }
  .footer-nav{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer-col:last-child{ grid-column:1 / -1; }
  .footer-inner{ padding:52px 20px 38px; }
  .footer-base{ padding:20px 20px 32px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}