/* ======================================================================
   Mudiposter Blog — style.css (2025 Black-Minimal)
   ----------------------------------------------------------------------
   Hedef:
   - Genel arkaplan açık; tipografi siyah (minimal).
   - Görsellerin ÜZERİNDE (alt bantta) başlık/özet birleşimi (overlay).
   - Accent renk ile (neon koral) mikro vurgular.
   - Tailwind sadece layout/spacing için; kimliği bu dosya yönetir.
   ----------------------------------------------------------------------
   Nasıl kullanılır?
   - Bölüm başlıklarına: .headline .headline--underline
   - Vitrin kartlarına (overlay): .overlay-card (img + .scrim + .body)
   - Aside kartlarına: .side-card, başlık için .side-title
   - Butonlara: .btn .btn--primary veya .btn--outline
   - Trend carousel 4 kart görünür (lg+); responsive kırılımlar hazır.
   ====================================================================== */

/* 1) Design Tokens (renk/ölçek) */
:root{
  --bg: #FAFAFB;              /* sayfa zemini: hafif fildişi/açık gri */
  --ink: #0B0B0F;             /* ana metin: “siyah” görünümü */
  --muted: #6B7280;           /* ikincil metin/gölge */
  --line: #E6E8ED;            /* ince sınırlar */
  --accent: #FF5C7A;          /* neon koral (2025 enerjisi) */
  --accent-2: #06B6D4;        /* siber camgöbeği (ikincil vurgu) */
  --scrim-strong: rgba(0,0,0,.72);
  --scrim-soft: rgba(0,0,0,.12);
  --ring: rgba(255,92,122,.18);
  --shadow-soft: 0 14px 32px -18px rgba(11,11,15,.25);
}

/* 2) Global reset ve beden dili */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  /* Font seçimi: Plus Jakarta Sans → modern, net, “black minimal”a yakışır */
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Scrollbar saklama (yatay şeritlerde görsel sadelik) */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 3) Bölüm başlıkları
   - headline: kalın, negatif tracking
   - headline--underline: sol altta neon koral alt çizgi
*/
.headline {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.headline--underline {
  position: relative;
  padding-bottom: .4rem;
}
.headline--underline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 68px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #FF8BA1);
}

/* 4) Butonlar: siyah minimal + accent */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  border-radius: 12px; padding: .6rem 1rem;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn i{ font-size: 1.05em; }
.btn--primary{
  background: var(--ink); color: #fff; box-shadow: var(--shadow-soft);
}
.btn--primary:hover{ transform: translateY(1px); filter: brightness(1.02); }
.btn--outline{
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
}
.btn--outline:hover{ background: #0b0b0f08; transform: translateY(1px); }

/* 5) Input (bülten) */
.input{
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem .8rem; outline: none; background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

/* 6) Header: şeffaf blur + ince alt çizgi */
.header{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* 7) Vitrin overlay kartı
   Yapı:
   <a class="overlay-card">
     <img class="media" ...>
     <span class="scrim"></span>
     <div class="body"> ... (meta + h2 + özet) </div>
   </a>
   - “Black minimal”i korumak için yazılar doğrudan görsel ÜZERİNDE,
     alt bantta birleşik; güçlü scrim kontrastı.
*/
.overlay-card{ position:relative; display:block; color:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; background: #0b0b0f0d; }
.overlay-card .media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .35s ease;
}
.overlay-card .scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--scrim-strong), var(--scrim-soft), transparent 60%);
}
.overlay-card .body{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1rem 1rem 1.05rem;
}
.overlay-card .meta{
  display:flex; align-items:center; gap:.5rem;
  font-size: 11px; opacity:.9;
}
.overlay-card .badge{
  padding:.14rem .5rem; border-radius:999px; background: #ffffff24;
  backdrop-filter: blur(2px);
}
.overlay-card h2{
  margin-top:.25rem; font-weight: 800; line-height:1.15;
  text-shadow: 0 12px 30px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.25);
}
.overlay-card p{
  margin-top:.25rem; font-size:.925rem; opacity:.9;
}
.overlay-card:hover .media{ transform: scale(1.03); }

/* 8) Aside kartları: sade çerçeve + sol çizgi vurgu başlık */
.side-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.25rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.side-card:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -18px rgba(11,11,15,.25); border-color:#DADDE4; }
.side-title{
  position:relative; padding-left:.8rem; font-weight:800; font-size:1.05rem;
}
.side-title::before{
  content:""; position:absolute; left:0; top:.2rem; bottom:.2rem; width:3px; border-radius:6px;
  background: linear-gradient(180deg, var(--accent), #FFA3B5);
}

/* listeler */
.side-list a{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem;
  color: var(--ink); text-decoration:none; background:#fff;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.side-list a:hover{ background:#f7f7fb; border-color:#D7DAE1; transform: translateY(1px); }
.side-list a .arr{ transition: transform .15s ease; }
.side-list a:hover .arr{ transform: translateX(2px); }

/* 9) Ticker (üst kayan yazı) */
#ticker{ border-bottom:1px solid var(--line); background: #fff8; backdrop-filter: blur(6px); }
#ticker .track{ animation: marquee 18s linear infinite; white-space: nowrap; display:flex; gap:1.75rem; }
#ticker .item{ display:inline-flex; align-items:center; gap:.5rem; color: var(--ink); }
#ticker .dot{ width:.4rem; height:.4rem; border-radius:999px; background: var(--accent); }
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* 10) Trend Carousel — 4 kart görünür (lg+) */
#trendViewport{ overflow:hidden; }
#trendTrack{ display:flex; gap:1rem; transition: transform .35s ease; }
.trend-card{ flex: 0 0 25%; }      /* 4 kart görünür */
@media (max-width: 1024px){ .trend-card{ flex-basis:50%; } } /* 2 kart */
@media (max-width: 640px){ .trend-card{ flex-basis:100%; } } /* 1 kart */

.trend-card article{
  height:100%; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:#fff;
}
.trend-card img{ width:100%; height:12rem; object-fit:cover; }
.trend-card .content{ padding:1rem; }
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px; background:#0b0b0f08; color: var(--ink);
  font-size:12px; font-weight:700;
}

/* 11) Instagram feed (yana kaymalı) */
#instafeed .tile{
  position:relative; width: 9rem; height: 9rem;
  border-radius:14px; overflow:hidden; background:#F2F3F6; border:1px solid var(--line);
}
@media (min-width:640px){ #instafeed .tile{ width:10rem; height:10rem; } }
@media (min-width:768px){ #instafeed .tile{ width:11rem; height:11rem; } }
#instafeed img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
#instafeed .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0); transition: background .25s ease; }
#instafeed .ig{
  position:absolute; right:.5rem; bottom:.5rem; width:2rem; height:2rem; border-radius:999px;
  background:#fff; color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow-soft);
}
#instafeed .tile:hover img{ transform: scale(1.03); }
#instafeed .tile:hover .overlay{ background: rgba(0,0,0,.18); }

/* 12) Arama diyaloğu — sade */
.search-dialog{
  position: fixed; inset:0; z-index:60; display:none;
  background: rgba(0,0,0,.28); backdrop-filter: blur(2px);
}
.search-dialog .panel{
  width:100%; max-width: 44rem; margin:4rem auto; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow-soft);
}
.search-dialog .head{ display:flex; align-items:center; gap:.6rem; padding:1rem; border-bottom:1px solid var(--line); }
.search-dialog .results{ max-height:60vh; overflow:auto; }
.search-dialog .row{ display:block; padding:1rem; border-bottom:1px solid var(--line); color: var(--ink); text-decoration:none; }
.search-dialog .row:hover{ background:#f7f7fb; }

/* 13) Yardımcı ufak dokunuşlar */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--muted);
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.kicker::before{
  content:""; width:.45rem; height:.45rem; border-radius:999px; background: var(--accent);
}