/*
  styles.css
  - Tüm görsel stiller burada toplanır.
  - Bölümler: Temel/Reset, Yerleşim, Bileşenler, Galeri, Mesajlar, Lightbox, Diğer
*/

/* --- Temel / Reset --- */
:root{
  /* Romantik palet */
  --bg:#121018;                 /* koyu morumsu gece */
  --card:#1b1626;               /* koyu kart */
  --text:#fff6fb;               /* sıcak beyaz */
  --muted:#cbb5c5;              /* pembe-mor nötr */
  --line:rgba(255,255,255,.10); /* çizgi */
  --accent:#ff5f9a;             /* sıcak pembe */
  --accent2:#9d7bff;            /* lavanta */
  --accent3:#ffd1dc;            /* pastel pembe */
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius:18px;
  --glow: 0 0 0 rgba(255,95,154,0);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  /* Daha geniş kapsayan, kesilmeyen çok katmanlı arkaplan */
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(255,95,154,.20), transparent 60%),
    radial-gradient(100% 85% at 100% 0%, rgba(157,123,255,.18), transparent 55%),
    radial-gradient(120% 100% at 50% 120%, rgba(255,209,220,.10), transparent 60%),
    conic-gradient(from 220deg at 70% 20%, rgba(255,95,154,.08), rgba(157,123,255,.06), transparent 35%),
    var(--bg);
  background-attachment: fixed;
  overflow-x:hidden;
}
a{color:inherit}

/* --- Yerleşim / Layout --- */
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 56px; position:relative; z-index:1}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(11,11,18,.88), rgba(11,11,18,.55));
  border-bottom: 1px solid var(--line);
}
.header-inner{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}

/* --- Marka / Başlık --- */
.brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand .title{font-size:14px;letter-spacing:.2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .names{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background: linear-gradient(90deg, #ff8db7, #ffd1dc); -webkit-background-clip:text; background-clip:text; color:transparent}

/* --- Sekmeler --- */
.tabs{display:flex;gap:8px;align-items:center}
.tab{
  border:1px solid var(--line);
  background: rgba(18,18,37,.72);
  color: var(--text);
  padding:10px 12px;
  border-radius: 999px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
  user-select:none;
}
.tab:active{transform: scale(.98)}
.tab[aria-selected="true"]{
  border-color: rgba(255,95,154,.55);
  background: linear-gradient(135deg, rgba(255,95,154,.20), rgba(157,123,255,.16));
  box-shadow: 0 8px 30px rgba(255,95,154,.12);
}
.tab:hover{box-shadow: 0 6px 18px rgba(157,123,255,.12)}

/* --- Hero --- */
.hero{padding:22px 0 6px}
.hero-card{
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,95,154,.12), rgba(157,123,255,.10));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero-card::after{
  /* Kalp ışıltısı */
  content:""; position:absolute; right:-60px; top:-40px; width:180px; height:180px;
  background: radial-gradient(closest-side, rgba(255,95,154,.15), rgba(255,95,154,0));
  filter: blur(6px); pointer-events:none; animation: float 6s ease-in-out infinite;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 240px at 20% 0%, rgba(255,77,136,.35), transparent 60%),
              radial-gradient(600px 260px at 90% 0%, rgba(124,92,255,.28), transparent 65%);
  opacity:.35;
  pointer-events:none;
}
.hero-inner{position:relative; padding:18px 16px 14px}
.headline{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.headline h1{margin:0;font-size:22px;letter-spacing:.2px;background: linear-gradient(90deg, #ffd1dc, #ff5f9a 30%, #9d7bff 70%, #ffd1dc); background-size: 200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: shimmer 6s linear infinite}
@keyframes shimmer{0%{background-position: 0% 50%} 100%{background-position: 200% 50%}}
@media (prefers-reduced-motion: reduce){ .headline h1{animation: none}}
.headline .date{color:var(--muted);font-size:13px}
.sub{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* --- İçerik / Paneller --- */
.content{padding-top:14px}
.grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:12px}
.panel{grid-column: 1 / -1;border:1px solid var(--line);background: rgba(18,18,37,.65);border-radius: var(--radius);box-shadow: 0 10px 40px rgba(0,0,0,.35);overflow:hidden}
.panel-head{padding:14px 14px 12px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panel-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.panel-title h2{margin:0;font-size:15px}
.panel-title p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.panel-body{padding:14px}

/* --- Arama / Kontroller --- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.search{display:flex;align-items:center;gap:8px;flex: 1 1 260px;max-width: 520px;border:1px solid var(--line);background: rgba(11,11,18,.65);border-radius: 999px;padding:10px 12px}
.search input{width:100%;border:0;outline:none;background: transparent;color: var(--text);font-size:13px}
.pill{border:1px solid var(--line);background: rgba(11,11,18,.55);color: var(--muted);padding:9px 10px;border-radius: 999px;font-size:12px;user-select:none; transition: background .2s ease, border-color .2s ease, color .2s ease}
.pill.active{background: linear-gradient(135deg, rgba(255,95,154,.20), rgba(157,123,255,.16)); border-color: rgba(255,95,154,.45); color: var(--text)}

/* --- Çipler (filtreler) --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);background: rgba(11,11,18,.45);color: var(--muted);padding:8px 10px;border-radius: 999px;font-size:12px;cursor:pointer;user-select:none;transition: background .2s ease, border-color .2s ease, color .2s ease}
.chip[aria-pressed="true"]{background: linear-gradient(135deg, rgba(255,77,136,.18), rgba(124,92,255,.14)); border-color: rgba(255,77,136,.55); color: var(--text)}

/* --- Galeri --- */
.gallery{display:grid;grid-template-columns: repeat(2, 1fr);gap:10px}
@media (min-width: 720px){
  .gallery{grid-template-columns: repeat(3, 1fr); gap:12px}
  .hero-inner{padding:20px 18px 16px}
  .headline h1{font-size:26px}
}
@media (min-width: 980px){
  .gallery{grid-template-columns: repeat(4, 1fr)}
}

/* --- Animasyonlar --- */
@keyframes fadeInUp{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)}}
@keyframes float{0%{transform: translateY(0)}50%{transform: translateY(-6px)}100%{transform: translateY(0)}}
@keyframes sparkle{0%,100%{opacity:.6}50%{opacity:1}}
.fade-in{animation: fadeInUp .35s ease both}

.tile{position:relative;border-radius: 16px;overflow:hidden;border:1px solid var(--line);background: rgba(255,255,255,.03);cursor:pointer;aspect-ratio: 1 / 1;transform: translateZ(0); transition: box-shadow .25s ease, transform .15s ease}
.tile img{width:100%; height:100%; object-fit:cover;display:block;transition: transform .35s ease, opacity .25s ease; opacity: 0}
.tile.loaded img{opacity: 1}
.tile:hover{box-shadow: 0 10px 28px rgba(255,95,154,.18); transform: translateY(-2px)}
.tile:hover img{transform: scale(1.04)}
.tile .cap{position:absolute; left:0; right:0; bottom:0;padding:10px 10px 9px;background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));color: rgba(255,255,255,.95);font-size:12px;line-height:1.25}

/* --- Mesajlar --- */
.messages{display:flex;flex-direction:column;gap:10px}
.msg{border:1px solid var(--line);background: rgba(11,11,18,.55);border-radius: 16px;padding:12px 12px; animation: fadeInUp .3s ease both}
.msg .meta{display:flex;gap:10px;align-items:center;justify-content:space-between}
.msg .who{font-weight:700;font-size:13px}
.msg .when{color:var(--muted);font-size:12px}
.msg .text{margin:8px 0 0; color: rgba(244,244,255,.95); font-size:14px; line-height:1.55; white-space:pre-wrap}

/* --- Lightbox --- */
.lightbox{position:fixed; inset:0; z-index:100;background: rgba(0,0,0,.78);display:none;padding:18px 14px}
 .lightbox[aria-hidden="false"]{display:flex;align-items:center;justify-content:center}
 .lb-card{width:min(980px, 100%);border-radius: 18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background: linear-gradient(180deg, rgba(27,22,38,.92), rgba(27,22,38,.86));box-shadow: var(--shadow); transform: scale(.98); opacity:.0; animation: lbIn .18s ease forwards}
 @keyframes lbIn{to{transform: scale(1); opacity:1}}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.10);background: rgba(11,11,18,.55)}
.lb-title{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-actions{display:flex;gap:8px}
.iconbtn{border:1px solid rgba(255,255,255,.12);background: rgba(27,22,38,.72);color: var(--text);border-radius: 12px;padding:8px 10px;font-size:12px;cursor:pointer; transition: box-shadow .2s ease, transform .1s ease, background .2s ease, border-color .2s ease}
.iconbtn:hover{box-shadow: 0 8px 24px rgba(255,95,154,.15)}
.iconbtn:active{transform: scale(.98)}
.iconbtn[aria-pressed="true"], .iconbtn.active{background: rgba(255,95,154,.18); border-color: rgba(255,95,154,.5)}
.lb-img{background:#000}
.lb-img img{width:100%;height:auto;display:block;max-height:78vh;object-fit:contain}
.lb-cap{padding:12px 12px 14px;color:var(--muted);font-size:13px;line-height:1.45}
.lb-cap .lb-date{display:block;margin-top:6px;opacity:.95;font-size:12px;color:var(--muted)}

/* --- Boş içerik / Uyarılar --- */
.empty{padding:18px;color:var(--muted);font-size:14px;text-align:center;border:1px dashed rgba(255,255,255,.14);border-radius: 16px;background: rgba(11,11,18,.35)}

/* --- Efekt katmanı --- */
#fx-root{position:fixed; inset:0; pointer-events:none; z-index:0}
.fx-heart{position:absolute; font-size:14px; color: var(--accent); opacity:.85; filter: drop-shadow(0 2px 6px rgba(255,95,154,.35)); animation: fxFloatUp linear forwards}
@keyframes fxFloatUp{from{transform: translateY(0) scale(1); opacity:.9} to{transform: translateY(-90px) scale(1.2); opacity:0}}

/* --- Alt bilgi --- */
footer{padding:20px 0 0;color:rgba(255,255,255,.55);font-size:12px;text-align:center}