/* ===========================================================
   Serda Ayık Sez — kişisel site
   Tema: "Evermade" — Editorial punk on cream paper
   Krem kâğıt + şarap bordo + hot pink · gölgesiz, çerçeve tabanlı
   =========================================================== */

:root{
  /* Renkler */
  --color-wine-maroon:#2d070b;
  --color-hot-pink:#ff0389;
  --color-cream-paper:#fef0e6;
  --color-blush-card:#ffdce2;
  --color-soft-pink:#ffc7de;
  --color-pure-black:#000000;

  /* Roller */
  --bg:var(--color-cream-paper);
  --ink:var(--color-wine-maroon);
  --accent:var(--color-hot-pink);
  --line:rgba(45,7,11,.16);

  /* Tipografi */
  --font-serif:'Instrument Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sans:'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Yerleşim */
  --max:1200px;
  --radius-card:8px;
  --radius-pill:9999px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.4;
  font-size:18px;
  letter-spacing:-.18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent);}

h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:1.1;letter-spacing:-.01em;}

.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
.narrow{max-width:720px;}

/* ---------- Görsel indirme koruması ---------- */
img, .img-protect{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none; -khtml-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.media{position:relative;overflow:hidden;background:var(--color-blush-card);}
.media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:transparent;pointer-events:auto;
}

/* ---------- Mono etiketler / eyebrow ---------- */
.eyebrow,.sub,.card-meta,.nav-links a,.btn,.badge,.back-link,.cat-card .count,.footer-note,.socials{
  font-family:var(--font-mono);
  font-feature-settings:"ss01" on;
}
.eyebrow,.sub,.card-meta{
  font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.eyebrow::before,.sub::before{content:"• ";}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(254,240,230,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{
  font-family:var(--font-serif);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;
  color:var(--ink);line-height:1;
}
.brand span{color:var(--accent);}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{
  color:var(--ink);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 0;border-bottom:1px solid transparent;transition:.18s;
}
.nav-links a:hover{color:var(--accent);}
.nav-links a.active{border-bottom-color:var(--accent);color:var(--accent);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;}

/* ---------- Hero (krem editoryal) ---------- */
.hero{
  position:relative;padding:104px 0 88px;text-align:center;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(2.4rem,6vw,3rem);margin:0 0 18px;}
.hero p{font-family:var(--font-sans);font-size:1.22rem;line-height:1.4;color:var(--ink);max-width:640px;margin:0 auto;}
.hero p.sub{font-family:var(--font-mono);font-size:11px;font-weight:500;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;max-width:none;margin:0 0 16px;}

/* ---------- Hero (maroon stage + watermark) ---------- */
.hero--stage{
  background:var(--color-wine-maroon);color:var(--color-cream-paper);
  border-bottom:0;text-align:center;
  padding:96px 0 80px;
  /* Yazılar ve büyük "Serda" tek hücrede üst üste binerek ortalanır */
  display:grid;grid-template-columns:1fr;place-items:center;
}
.hero--stage > .container{grid-column:1;grid-row:1;z-index:2;position:relative;}
.hero--stage h1{color:var(--color-cream-paper);}
.hero--stage .sub{color:var(--accent);}
.hero--stage p{color:var(--color-soft-pink);}
.hero-watermark{
  grid-column:1;grid-row:1;z-index:1;justify-self:center;align-self:center;margin:0;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(7rem,26vw,16rem);line-height:.85;white-space:nowrap;
  color:var(--accent);opacity:.16;pointer-events:none;letter-spacing:-.02em;
}

/* ---------- Bölümler ---------- */
.section{padding:96px 0;}
.section + .section{border-top:1px solid var(--line);}
.section-title{font-size:2.4rem;margin:0 0 14px;}
.section-intro{font-family:var(--font-sans);color:var(--ink);margin:0 0 40px;max-width:660px;font-size:1.1rem;}

/* ---------- Grid / kartlar ---------- */
.grid{display:grid;gap:32px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}

.card{
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;transition:border-color .2s ease, transform .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{border-color:var(--accent);transform:translateY(-3px);}
.card .media{aspect-ratio:4/5;}
.card .media img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-body h3{font-family:var(--font-sans);font-weight:400;margin:0;font-size:22px;letter-spacing:-.22px;color:var(--ink);line-height:1.2;}
.card-body p{font-family:var(--font-sans);margin:0;color:var(--ink);font-size:14px;opacity:.82;}
.card-meta{margin:0;}
.card.post .media{aspect-ratio:3/2;}

/* ---------- Butonlar (outline pill) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--accent);border:1px solid var(--accent);
  padding:14px 24px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  transition:background .18s, color .18s;cursor:pointer;
}
.btn:hover{background:var(--accent);color:var(--color-cream-paper);}
.btn-ghost{color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--color-cream-paper);}

/* ---------- Atölye ürün detay ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-bottom:96px;}
.product:last-child{margin-bottom:0;}
.product .media{border-radius:var(--radius-card);border:1px solid var(--line);aspect-ratio:4/5;}
.product .media img{width:100%;height:100%;object-fit:cover;}
.product .gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.product .gallery .media{aspect-ratio:1/1;}

/* ---------- Carousel (Instagram tarzı: tek görsel, swipe + yan oklar) ---------- */
.carousel{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);}
.carousel-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
}
.carousel-track::-webkit-scrollbar{display:none;width:0;height:0;}
.carousel-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;}
.carousel-slide .media{aspect-ratio:4/5;}
.carousel-slide .media img{width:100%;height:100%;object-fit:cover;}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;pointer-events:auto;
  width:40px;height:40px;border-radius:var(--radius-pill);
  background:rgba(254,240,230,.92);border:1px solid var(--accent);color:var(--accent);
  font-family:var(--font-serif);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s;
}
.carousel-btn:hover{background:var(--accent);color:var(--color-cream-paper);}
.carousel-btn[hidden]{display:none;}
.carousel-prev{left:10px;}
.carousel-next{right:10px;}
.carousel-dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:3;pointer-events:none;
  display:flex;gap:6px;justify-content:center;
}
.carousel-dots .dot{width:7px;height:7px;border-radius:var(--radius-pill);background:rgba(254,240,230,.55);transition:background .18s;}
.carousel-dots .dot.active{background:var(--color-cream-paper);}
.product h2{font-size:2.2rem;margin:0 0 10px;}
.product .dims{font-family:var(--font-mono);color:var(--accent);font-size:13px;letter-spacing:.02em;margin:0 0 18px;}
.product .desc{font-family:var(--font-sans);color:var(--ink);font-size:1.05rem;}
.product .desc strong{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);display:block;margin-top:16px;margin-bottom:4px;}

/* ---------- Yazı (blog) ---------- */
.article-hero .media{border-radius:var(--radius-card);aspect-ratio:3/2;margin:0 0 32px;border:1px solid var(--line);}
.article-hero .media img{width:100%;height:100%;object-fit:cover;}
.article .kicker{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;}
.article h1{font-size:clamp(2.2rem,5vw,3rem);margin:0 0 28px;}
.article p{font-family:var(--font-sans);font-size:1.18rem;line-height:1.6;margin:0 0 24px;}
.back-link{display:inline-block;margin-bottom:28px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.back-link:hover{color:var(--accent);}

/* ---------- Hakkımda ---------- */
.about{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;}
.about .photo{width:220px;}
.about .photo .media{border-radius:var(--radius-card);aspect-ratio:3/4;border:1px solid var(--ink);}
.about .photo .media img{width:100%;height:100%;object-fit:cover;}
.about p{font-family:var(--font-sans);font-size:1.18rem;line-height:1.6;}

/* ---------- Kitabım ---------- */
.book{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start;}
.book .cover .media{
  aspect-ratio:2/3;border-radius:var(--radius-card);border:1px solid var(--ink);
  background:var(--color-blush-card);display:flex;align-items:center;justify-content:center;
}
.book .cover .placeholder{font-family:var(--font-mono);color:var(--ink);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:20px;pointer-events:none;}
.badge{
  display:inline-block;background:var(--color-blush-card);border:1px solid var(--accent);
  color:var(--accent);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--radius-pill);font-weight:400;margin-bottom:18px;
}

/* ---------- Boş durum ---------- */
.empty{
  text-align:center;padding:80px 24px;border:1px solid var(--line);
  border-radius:var(--radius-card);background:var(--color-blush-card);color:var(--ink);
}
.empty h3{font-size:2rem;margin:0 0 12px;}
.empty p{font-family:var(--font-sans);margin:0;opacity:.8;}

/* ---------- Kategori seçici ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cat-card{
  border:1px solid var(--line);border-radius:var(--radius-card);padding:32px 28px;
  background:transparent;transition:border-color .2s, transform .2s, background .2s;display:block;color:var(--ink);
}
.cat-card:hover{border-color:var(--accent);transform:translateY(-3px);background:var(--color-blush-card);color:var(--ink);}
.cat-card h3{margin:0 0 10px;font-size:1.7rem;}
.cat-card p{font-family:var(--font-sans);margin:0;color:var(--ink);opacity:.82;font-size:1rem;}
.cat-card .count{display:inline-block;margin-top:18px;color:var(--accent);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- Footer (maroon band) ---------- */
.site-footer{
  border-top:0;background:var(--color-wine-maroon);color:var(--color-cream-paper);
  padding:52px 0;margin-top:0;
}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
.site-footer .brand{color:var(--color-cream-paper);}
.site-footer .brand span{color:var(--accent);}
.socials{display:flex;gap:14px;list-style:none;margin:0;padding:0;}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid rgba(254,240,230,.4);
  background:transparent;color:var(--color-cream-paper);transition:.2s;
}
.socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.socials svg{width:20px;height:20px;}
.footer-note{color:var(--color-soft-pink);font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 0;}

/* ---------- Yasal sayfa (gizlilik) ---------- */
.legal h2{font-size:1.5rem;margin:40px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p, .legal li{font-family:var(--font-sans);font-size:1.05rem;line-height:1.65;}
.legal ul{padding-left:22px;}
.legal li{margin-bottom:6px;}
.legal .updated{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:1fr;}
  .product{grid-template-columns:1fr;gap:24px;}
  .about{grid-template-columns:1fr;gap:28px;}
  .about .photo{width:200px;}
  .book{grid-template-columns:1fr;gap:28px;}
  .book .cover{max-width:260px;}
}
@media (max-width:620px){
  body{font-size:17px;}
  .hero{padding:72px 0 56px;}
  .hero--stage{padding:88px 0 76px;}
  .section{padding:64px 0;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .nav-links{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;
    background:var(--color-cream-paper);border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .28s ease;padding:8px 0;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:16px 24px;border-bottom:1px solid var(--line);}
  .nav-links a.active{border-bottom-color:var(--line);}
  .nav-toggle{display:block;}
  .footer-inner{flex-direction:column;text-align:center;}
}