/* ================== Nostaljik Kent Belleği – Ortak Stil ================== */
:root{
  --paper:#efe3c6;
  --paper-ink:#2a2320;
  --paper-ink-soft:#4a403a;
  --paper-edge:#d9c8a3;
  --accent:#8f6a3a;
  --link:#6a5030;
  --link-hover:#3f2e1a;
  --brand:#4b3a27;
  --maxw:1100px;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; color:var(--paper-ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.65;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(0,0,0,.05), transparent 55%),
    radial-gradient(1000px 500px at 110% 40%, rgba(0,0,0,.05), transparent 55%),
    linear-gradient(0deg, #f6ecd2, #ebddba);
  position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  opacity:.25; mix-blend-mode:multiply; z-index:0;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }

/* -------- Header & Nav -------- */
header{ position:sticky; top:0; z-index:50; background:linear-gradient(#f3e7c9,#eadbb4); box-shadow:var(--shadow); border-bottom:1px solid var(--paper-edge); }
.brand{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.brand__logo{ width:52px; height:52px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fdf7e8, #e3d2a8); border:2px solid #c6b186; box-shadow: inset 0 2px 6px rgba(0,0,0,.15); display:grid; place-items:center; font-weight:700; color:#6b4b2a; font-family: "EB Garamond", serif; }
.brand__title{ font-family:"EB Garamond", serif; font-weight:700; color:var(--brand); font-size: clamp(22px, 3.2vw, 34px) }
.brand__subtitle{ margin-top:-6px; color:var(--paper-ink-soft); font-size:14px }

nav{ position:relative; }
.nav{ display:flex; flex-wrap:wrap; gap:4px 10px; padding:8px 0 14px; margin:0 }
.nav > li{ list-style:none; position:relative }
.nav > li > a, .nav .has-sub > button{
  display:inline-block; padding:10px 14px; border-radius:999px; color:var(--link);
  text-decoration:none; font-weight:700; font-size:15px; border:1px solid transparent; background:transparent;
}
.nav > li > a:hover, .nav .has-sub > button:hover{ color:var(--link-hover); border-color:#cdb88f; background:#f6ecd6 }
.nav a.active{ background:#eadbb4; border-color:#cdb88f; color:var(--link-hover) }

/* Dropdown */
.has-sub > button{ cursor:pointer }
.dropdown{ position:absolute; left:0; top:calc(100% + 8px); min-width:220px; background:#fbf3dd; border:1px solid #d9c8a3; border-radius:14px; box-shadow:var(--shadow); display:none; padding:8px }
.dropdown a{ display:block; padding:10px 12px; color:var(--link); text-decoration:none; border-radius:10px; font-weight:600 }
.dropdown a:hover{ background:#f1e6c7; color:var(--link-hover) }
.has-sub:hover .dropdown{ display:block }

/* Paper / Card */
.paper{ background:linear-gradient(#fbf2d8,#f0e2bf); border:1px solid var(--paper-edge); border-radius:var(--radius); box-shadow:var(--shadow); position:relative; overflow:hidden }
.paper::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.3), transparent 18%), radial-gradient(600px 200px at 10% -10%, rgba(255,255,255,.5), transparent 40%); mix-blend-mode:overlay; pointer-events:none }
.hero{ margin:26px 0 18px; padding:28px 26px }
.hero h1{ font-family:"EB Garamond", serif; font-weight:700; margin:0 0 10px; font-size: clamp(28px, 5vw, 44px); color:var(--brand)}
.hero p{ margin:0; color:var(--paper-ink-soft); max-width:72ch }

.section{ margin:36px 0 }
.section h2{ font-family:"EB Garamond", serif; color:var(--brand); margin:0 0 12px; font-size: clamp(22px, 3.2vw, 30px) }
.grid{ display:grid; gap:20px }
.grid-3{ grid-template-columns: repeat(3,1fr) }
.grid-2{ grid-template-columns: repeat(2,1fr) }
@media (max-width: 900px){ .grid-3{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns:1fr } }

.card{ background:#f9efd2; border:1px solid #d9c8a3; border-radius:14px; padding:16px; transition:transform .18s ease, box-shadow .18s ease }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.15) }
.card h3{ margin:8px 0 4px; font-family:"EB Garamond", serif; color:var(--brand) }
.card p{ margin:0; color:var(--paper-ink-soft) }
.thumb{ aspect-ratio:16/10; width:100%; border-radius:10px; background:linear-gradient(135deg,#d9c8a3,#efe3c6); border:1px solid #cbb487 }

/* Content */
.content p{ margin:0 0 12px }
.content a{ color:var(--link); text-decoration:none; border-bottom:1px dashed #bda576 }
.content a:hover{ color:var(--link-hover) }
.lead{ font-size:18px; color:var(--paper-ink-soft) }

/* Footer */
footer{ margin:40px 0 80px; color:#5a4a3c }
.footer-card{ padding:18px 20px }

/* Anchors */
.anchor{ scroll-margin-top:130px }

/* Mobile menu (optional button hidden for now) */
.menu-toggle{ display:none }