/*
Theme Name: Vitrin Luks
Theme URI: https://site-ai.local/
Author: Site AI
Description: Elit/lüks tema — VIP ve Premium ilanlar tam genişlikte, kendi içinde sonsuz kayan tek görselli satırlar halinde; Yeni Eklenenler yatay kaydırmalı portre şerit. Sunucu tarafında (PHP) render edilir, JS yalnız kayma animasyonu ve lazy-load için kullanılır.
Version: 1.0
Requires PHP: 7.4
Text Domain: vitrin-luks
*/

:root{
  --siyah:#07050a;
  --bordo:#180309;
  --bordo-2:#2a0710;
  --kart:#120a0e;
  --altin:#d8b45a;
  --altin-parlak:#f3dfa4;
  --bakir:#b87333;
  --metin:#efe6dc;
  --metin-sonuk:#a6968c;
  --cizgi:rgba(216,180,90,.22);
  --bosluk:9px;
  --kenar:12px;
  --satir-h:94px;
  --panel-w:152px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 520px at 50% -180px,rgba(122,12,38,.42),transparent 70%),
    radial-gradient(700px 400px at 100% 320px,rgba(184,115,51,.10),transparent 70%),
    linear-gradient(180deg,var(--bordo) 0%,var(--siyah) 42%,#050308 100%);
  background-attachment:fixed;
  color:var(--metin);
  font-family:"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.marka{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px var(--kenar) 8px;
  border-bottom:1px solid var(--cizgi);
  background:linear-gradient(180deg,rgba(10,3,7,.96),rgba(10,3,7,.72));
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:30;
}
.logo{display:flex;align-items:center;gap:8px;min-width:0}
.logo .mm{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--bakir),var(--altin-parlak),var(--bakir),#7a4a1c,var(--altin));
  display:grid;place-items:center;color:#1a0d05;font:700 13px/1 Georgia,serif;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(216,180,90,.35);
}
.logo b{
  font:600 16px/1 Georgia,"Times New Roman",serif;letter-spacing:.06em;
  background:linear-gradient(92deg,var(--altin-parlak),var(--altin) 45%,var(--bakir));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;
}
.logo small{display:block;font:400 8.5px/1.2 Arial,sans-serif;letter-spacing:.24em;color:var(--metin-sonuk);text-transform:uppercase;margin-top:2px}
.canli{white-space:nowrap;
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  font:600 10.5px/1 Arial,sans-serif;color:#cdb9a6;
  border:1px solid var(--cizgi);border-radius:999px;padding:5px 9px;
  background:rgba(255,255,255,.02);white-space:nowrap;
}
.nokta{width:7px;height:7px;border-radius:50%;background:#37d67a;box-shadow:0 0 8px #37d67a;animation:nabiz 2.2s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.baslik-serit{padding:9px var(--kenar) 3px}
h1{margin:0;font:400 17px/1.3 Georgia,"Times New Roman",serif;color:#f6ece0}
h1 em{font-style:normal;background:linear-gradient(92deg,var(--altin-parlak),var(--bakir));-webkit-background-clip:text;background-clip:text;color:transparent}
.baslik-serit p{margin:4px 0 0;font:400 11.5px/1.45 Arial,sans-serif;color:var(--metin-sonuk)}

.katman{margin-top:12px}
.katman-bas{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 var(--kenar) 6px}
.katman-bas h2{
  margin:0;font:600 14px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(92deg,var(--altin-parlak),var(--altin) 55%,var(--bakir));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;align-items:center;gap:7px;
}
.katman-bas h2::before{content:"";width:14px;height:1px;background:linear-gradient(90deg,transparent,var(--altin))}
.sayac{font:500 10px/1 Arial,sans-serif;color:var(--metin-sonuk);letter-spacing:.12em;white-space:nowrap}

.satirlar{display:block;width:100%}
.satir{
  position:relative;display:block;width:100%;height:var(--satir-h);
  overflow:hidden;background:#0d070b;
  border-top:1px solid rgba(216,180,90,.13);
  border-bottom:1px solid rgba(0,0,0,.65);
  contain:paint;
}
.satirlar .satir:first-child{border-top:1px solid var(--cizgi)}

.akis{
  position:absolute;inset:0;
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0 center;
  will-change:background-position;
  animation:kay var(--sure,20s) linear infinite;
  animation-play-state:paused;
}
.satir.akiyor .akis{animation-play-state:running}
@keyframes kay{
  from{background-position:0 center}
  to{background-position:calc(-1 * (var(--satir-h) * 2.75)) center}
}
.satir .perde{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,2,6,.72) 0,rgba(6,2,6,.22) calc(var(--panel-w) + 14px),rgba(6,2,6,0) calc(var(--panel-w) + 52px),rgba(6,2,6,.30) 100%);
}
.panel{
  position:absolute;left:0;top:0;bottom:0;width:var(--panel-w);z-index:3;
  padding:9px 10px 9px var(--kenar);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:linear-gradient(100deg,rgba(24,3,9,.58) 0%,rgba(122,60,20,.24) 62%,rgba(24,3,9,.02) 100%);
  backdrop-filter:blur(4px) saturate(120%);
  -webkit-backdrop-filter:blur(4px) saturate(120%);
  border-right:1px solid rgba(243,223,164,.34);
  box-shadow:6px 0 14px rgba(0,0,0,.30),inset 0 0 18px rgba(243,223,164,.06);
}
.panel::after{
  content:"";position:absolute;right:-1px;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,var(--altin-parlak),transparent);
}
.panel .ad{
  display:flex;align-items:center;gap:6px;
  font:600 14px/1.15 Georgia,"Times New Roman",serif;color:#fbf3e6;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.panel .ad i{width:6px;height:6px;border-radius:50%;background:#37d67a;box-shadow:0 0 7px #37d67a;flex:0 0 6px}
.panel .ad i.off{background:#7d6a5c;box-shadow:none}
.panel .olc{font:600 10px/1.15 Arial,sans-serif;color:#f0dcbb;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.panel .olc span{color:rgba(240,220,187,.45);margin:0 3px}
.panel .semt{
  font:600 8.5px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#1a0d05;
  background:linear-gradient(100deg,var(--altin-parlak),var(--bakir));
  align-self:flex-start;padding:3px 6px;border-radius:4px;margin-top:2px;
}
.satir .rozet{
  position:absolute;right:10px;top:9px;z-index:3;
  font:700 8px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 7px;border-radius:4px;color:#150b04;
  background:linear-gradient(100deg,var(--altin-parlak),var(--bakir));
  box-shadow:0 1px 8px rgba(0,0,0,.6);
}
.satir .rozet.gold{color:#f7ecd8;background:linear-gradient(100deg,#7a0c26,#3a0712);border:1px solid rgba(243,223,164,.35)}
.satir .sira{
  position:absolute;right:10px;bottom:8px;z-index:3;
  font:600 9px/1 Georgia,serif;color:rgba(243,223,164,.6);letter-spacing:.1em;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ⚠ Owner (2026-09-20): "en altta olan normal ilanlar, yanyana 4'lü,
   kalanlar ise alta doğru dörtlü devam edecek şekilde sıralanmalı,
   slider gibi olmamalı." Önceki hâli yatay kaydırmalı bir şeritti;
   kullanıcı ancak kaydırarak devamını görebiliyordu. Artık tüm
   profiller AYNI ANDA, dörtlü ızgarada alt alta görünüyor. */
.serit{
  /* ⚠ Owner (2026-09-20): "genişlikleri full width değil."
     Izgara, üstündeki VIP/Gold satırları gibi KENARDAN KENARA olmalı —
     yan boşluk ve hücre arası boşluk kaldırıldı, dört kart ekranın
     tamamını böler. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;padding:0;
}
.serit::-webkit-scrollbar{display:none}
.kart{position:relative;width:100%;background:var(--kart);border-radius:0;overflow:hidden;border-right:1px solid rgba(0,0,0,.55);border-bottom:1px solid rgba(0,0,0,.55)}
.kart::after{
  content:"";position:absolute;inset:0;border-radius:0;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(243,223,164,.72),rgba(216,180,90,.06) 38%,rgba(184,115,51,.55) 78%,rgba(243,223,164,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.kart img{display:block;width:100%;height:auto;object-fit:cover;background:#1c1116;border:0}
.portre .kart{width:100%}
.serit .kart{width:100%;min-width:0;max-width:none}
.portre .kart img{aspect-ratio:170/300}
.bant{padding:5px 7px 6px;background:linear-gradient(180deg,rgba(42,7,16,.62),rgba(8,4,7,.80));border-top:1px solid rgba(216,180,90,.16)}
.bant .ad{display:flex;align-items:center;gap:5px;font:600 12px/1.15 Georgia,"Times New Roman",serif;color:#f7eede;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bant .ad i{width:5px;height:5px;border-radius:50%;background:#37d67a;box-shadow:0 0 6px #37d67a;flex:0 0 5px}
.bant .ad i.off{background:#6b5a4d;box-shadow:none}
.bant .bilgi{margin-top:3px;font:500 9.5px/1.1 Arial,sans-serif;color:#bda98f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bant .bilgi span{color:#7d6a5c;margin:0 3px}
.kart .rozet{
  position:absolute;top:5px;left:5px;z-index:2;font:700 8px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 5px;border-radius:4px;color:#f5ece0;background:linear-gradient(100deg,#7a0c26,#3a0712);
}
.kart .sehir{
  position:absolute;top:5px;right:5px;z-index:2;font:600 8px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 5px;border-radius:4px;color:#f0e3d2;background:rgba(6,3,6,.62);border:1px solid rgba(216,180,90,.25);backdrop-filter:blur(3px);
}
.ilerleme{height:2px;margin:0 var(--kenar);border-radius:2px;background:rgba(216,180,90,.13);overflow:hidden}
.ilerleme i{display:block;height:100%;width:14%;border-radius:2px;background:linear-gradient(90deg,var(--bakir),var(--altin-parlak));transition:transform .12s linear,width .12s linear;transform-origin:left}
.ipucu{padding:5px var(--kenar) 0;font:500 9.5px/1 Arial,sans-serif;color:#6f6059;letter-spacing:.08em}
.ok{display:none}
/* Izgara düzeninde kaydırma göstergeleri anlamını yitirdi. */
.ilerleme,.ipucu{display:none}
@media (min-width:760px){
  :root{--satir-h:118px;--panel-w:230px}
  /* ⚠ 2026-09-20: `.portre .kart{width:168px}` ve kaydırma okları
     ŞERİT düzenine aitti. Normal ilanlar 4'lü ızgaraya çevrilince
     (owner: "slider gibi olmamalı") kart genişliği hücreden gelir,
     oklar da anlamsız kalır — ikisi de kaldırıldı. */
  .sarmal{position:relative}
  .panel .ad{font-size:16px}.panel .olc{font-size:11px}
}

.makale{margin:22px var(--kenar) 0;padding:16px 15px 4px;border-top:1px solid var(--cizgi);
  background:linear-gradient(180deg,rgba(255,255,255,.017),transparent);border-radius:12px 12px 0 0}
.makale h2{margin:0 0 8px;font:600 16px/1.3 Georgia,"Times New Roman",serif;color:#f4e9da}
.makale h3{margin:16px 0 6px;font:600 13px/1.35 Georgia,"Times New Roman",serif;color:var(--altin);letter-spacing:.04em}
.makale p{margin:0 0 11px;font:400 12.5px/1.72 Arial,sans-serif;color:#c3b4a7}
.makale ul{margin:0 0 11px;padding-left:17px}
.makale li{font:400 12.5px/1.7 Arial,sans-serif;color:#c3b4a7;margin-bottom:4px}
.makale strong{color:#e8d9bf;font-weight:600}
footer.site-alt{margin-top:14px;padding:14px var(--kenar) 26px;border-top:1px solid var(--cizgi);
  font:400 10.5px/1.7 Arial,sans-serif;color:#6f6059;text-align:center}
footer.site-alt b{display:block;font:600 12px/1.4 Georgia,serif;color:var(--altin);letter-spacing:.14em;margin-bottom:5px}

.bos-durum{padding:18px var(--kenar);color:var(--metin-sonuk);font:400 12px/1.6 Arial,sans-serif}

@media (prefers-reduced-motion: reduce){
  .nokta{animation:none}
}

/* ⚠ Owner (2026-09-20): "yanyana 2 li olmuşlar, 4 lü olmalılar."
   Dar ekranda 3'e/2'ye düşüren kademeli kural KALDIRILDI — her ekran
   genişliğinde dört sütun. Dar ekranda kartlar küçülür, sayıları
   azalmaz. */