/* Ortak katman: sözleşme + marka parçaları.
 * Claude Design turu 1 (2026-08-22). Sözleşme kısmı ÖRNEKTEKİYLE AYNI:
 * tuval ölçüleri, [data-kapali] mekanizması, [data-alan]:empty, [data-eksik].
 * Değişen: marka görünüşü, tipografi ölçeği, telafi kuralları.
 */

@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:block}

:root{
  --yesil:#036039;
  --yesil-koyu:#024a2c;
  --yesil-derin:#013a22;
  --gece:#0e1f16;
  --altin:#c4a44a;
  --beyaz:#fafaf8;
  --krem:#f2f0ec;
  --komur:#1a1a1a;
  --gri:#6b6b6b;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#2a2a2a;font-family:"Poppins",sans-serif;-webkit-font-smoothing:antialiased}
img{display:block}

/*  Tuval ölçüleri: px, 1 CSS px = 1 çıktı px  */
.tuval{
  position:relative;overflow:hidden;background:var(--gece);color:var(--beyaz);
  --kenar:72px;
  --ust-guvenli:0px;   /* Instagram arayüzünün yediği alan */
  --alt-guvenli:0px;
  --sag-guvenli:0px;
  --eyebrow:22px;--h1:80px;--govde:28px;--ozellik:26px;
  --fiyat:60px;--ad:30px;--tel:24px;--logo-h:62px;--rozet-f:22px;
  --aralik:26px;
}
.tuval[data-olcu="story"]{width:1080px;height:1920px;
  --ust-guvenli:250px;--alt-guvenli:340px;--sag-guvenli:100px;--h1:88px;--fiyat:66px}
.tuval[data-olcu="4x5"]{width:1080px;height:1350px;--alt-guvenli:150px}
.tuval[data-olcu="1x1"]{width:1080px;height:1080px;
  --kenar:64px;--h1:70px;--fiyat:54px;--govde:26px;--aralik:22px}
.tuval[data-olcu="og"]{width:1200px;height:630px;
  --kenar:56px;--h1:52px;--govde:21px;--eyebrow:16px;--ozellik:20px;
  --fiyat:40px;--ad:22px;--tel:18px;--logo-h:46px;--rozet-f:16px;--aralik:16px}

/*  Anahtar mekanizması (sözleşme, değişmez)  */
[data-kapali~="fiyat"]    [data-anahtar="fiyat"],
[data-kapali~="aciklama"] [data-anahtar="aciklama"],
[data-kapali~="danisman"] [data-anahtar="danisman"],
[data-kapali~="ozellik"]  [data-anahtar="ozellik"],
[data-kapali~="rozet"]    [data-anahtar="rozet"],
[data-kapali~="iletisim"] [data-anahtar="iletisim"],
[data-kapali~="logo"]     [data-anahtar="logo"],
[data-kapali~="ilan_no"]  [data-anahtar="ilan_no"]{display:none}

[data-alan]:empty:not(img){display:none}

/*  Eksik fotoğraf: kırık ikon değil, marka zemini + monogram  */
.slot{position:relative;overflow:hidden;background:var(--yesil-derin)}
.slot>img{width:100%;height:100%;object-fit:cover}
.slot:has(>img[data-eksik]){background:var(--yesil-derin)}
.slot:has(>img[data-eksik="1"])::after{
  content:"";position:absolute;inset:0;
  background:url("../assets/fg-monogram.png") center/96px auto no-repeat;
  opacity:.28}
.slot>img[data-eksik]{opacity:0}

/*  Altın L köşeler: markanın tek ortak görsel imzası  */
.kose{border-color:var(--altin);border-style:solid;width:64px;height:64px;flex:none}
.kose-sag-ust{position:absolute;z-index:6;top:calc(var(--kenar) + var(--ust-guvenli));right:calc(var(--kenar) + var(--sag-guvenli));border-width:4px 4px 0 0}
.kose-sol-alt{border-width:0 0 4px 4px}

/* İmza satırı: sol altta altın L, sağda logo. Metin bloğu bunun ÜSTÜNDE durur,
 * böylece köşe imzası hiçbir ölçüde yazıyla çakışmaz. */
.imza{position:absolute;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;
  height:64px;left:var(--kenar);right:calc(var(--kenar) + var(--sag-guvenli));
  bottom:calc(var(--kenar) + var(--alt-guvenli))}

/*  Ortak tipografi parçaları  */
.eyebrow{font-size:var(--eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--altin)}
.baslik{
  font-size:var(--h1);font-weight:600;line-height:1.08;letter-spacing:-.03em;
  text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aciklama{
  font-size:var(--govde);font-weight:400;line-height:1.55;color:rgba(250,250,248,.82);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ozellik{display:flex;align-items:center;gap:18px;font-size:var(--ozellik);font-weight:500;color:rgba(250,250,248,.92)}
.ozellik .nokta{width:5px;height:5px;background:var(--altin);border-radius:50%;flex:none}
.fiyat{font-size:var(--fiyat);font-weight:700;letter-spacing:-.02em;white-space:nowrap;line-height:1}

.rozet{
  display:inline-flex;align-items:center;height:calc(var(--rozet-f) * 2.2);padding:0 calc(var(--rozet-f) * 1.3);
  border-radius:999px;background:var(--yesil);color:#fff;
  font-size:var(--rozet-f);font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.logo{height:var(--logo-h);width:auto}

.danisman{display:flex;align-items:center;gap:20px}
.danisman .portre{width:calc(var(--ad) * 2.4);height:calc(var(--ad) * 2.4);border-radius:50%;object-fit:cover;border:2px solid rgba(196,164,74,.75);flex:none}
.danisman .ad{font-size:var(--ad);font-weight:600;line-height:1.25}
.danisman .tel{font-size:var(--tel);font-weight:400;color:rgba(250,250,248,.72);line-height:1.3}
.ilan-no{font-size:calc(var(--tel) * .72);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.5)}