/* ============================================================
   TELEFON + HİKÂYE ARAYÜZÜ — ortak bileşen
   index.html kapağından çıkarıldı; markalar.html de aynı kasayı ve
   ekranı kullanır. Bütün ölçüler --w üzerinden hesaplanır; sahne
   telefonun --w değerini verir. Kurallar index.html'deki hâliyle
   bire bir aynıdır, tek kaynak burasıdır.
   ============================================================ */
/* ---------------------------------------------------- telefonun kendisi
   Gerçek bir cihazın hatları: metal çerçeve, ince ve eşit çerçeve payı,
   ekranı saran siyah kenar, dinamik ada, yan tuşlar, alt çizgi. Bütün
   ölçüler --w üzerinden hesaplandığı için sahnedeki iki boy da aynı
   orana sahiptir. */
.telefon{
  --w:min(252px,100%);
  position:relative;
  width:var(--w); margin:0 auto;
  padding:calc(var(--w) * .033);
  border-radius:calc(var(--w) * .152);
  /* Fırçalanmış titanyum: köşelerde ışık alan, yüzeyde koyulaşan gövde. */
  background:linear-gradient(148deg,
    #8B7FA3 0%, #4A3F63 7%, #241A38 26%, #150C22 52%,
    #251B39 74%, #4C4166 92%, #8F84A6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 30px 60px -28px rgba(0,0,0,.78),
    0 6px 18px -8px rgba(0,0,0,.55);
}
/* Cam parlaması: ekranın üstünden geçen tek yönlü ışık. */
.telefon::after{
  content:""; position:absolute; inset:0; z-index:4;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(114deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 20%,
    rgba(255,255,255,0) 44%);
}
/* Yan tuşlar. Solda sessize alma ve ses çifti, sağda güç tuşu; hepsi
   kasanın dışına birkaç piksel taşar, gerçek cihazdaki gibi. */
.tel-tus{
  position:absolute; z-index:0;
  width:calc(var(--w,252px) * .011); border-radius:2px;
  background:linear-gradient(90deg,#2E2542 0%,#6C6184 55%,#3A3050 100%);
}
.tel-tus.sol{left:calc(var(--w,252px) * -.008); top:20%; height:4%}
.tel-tus.sol::before,.tel-tus.sol::after{
  content:""; position:absolute; left:0; width:100%;
  border-radius:inherit; background:inherit;
}
.tel-tus.sol::before{top:180%; height:190%}
.tel-tus.sol::after{top:420%; height:190%}
.tel-tus.sag{right:calc(var(--w,252px) * -.008); top:29%; height:10%}

.telefon-ekran{
  position:relative; aspect-ratio:9/19.2; overflow:hidden;
  border-radius:calc(var(--w,252px) * .119); background:var(--green);
  /* Ekranı saran siyah kenar: metal çerçeve ile cam arasındaki hat. */
  box-shadow:
    0 0 0 calc(var(--w,252px) * .007) #07030F,
    inset 0 0 0 1px rgba(0,0,0,.55);
}
.telefon-ekran video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.telefon-ekran video.yok{display:none}
/* dinamik ada: sağ ucunda kamera merceğiyle */
.telefon-ekran::before{
  content:""; position:absolute; top:calc(var(--w,252px) * .034); left:50%;
  transform:translateX(-50%);
  width:calc(var(--w,252px) * .285); height:calc(var(--w,252px) * .082);
  border-radius:999px; z-index:3;
  background:radial-gradient(circle at 78% 50%,
    #1B1528 0 18%, #0C0716 19%, #06030C 40%);
}
/* alta doğru koyulaşan perde: üst ve alt yazılar her karede okunur kalsın */
.telefon-ekran::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,4,18,.58) 0%,rgba(10,4,18,0) 24%),
    linear-gradient(0deg,rgba(10,4,18,.94) 0%,rgba(10,4,18,.80) 16%,rgba(10,4,18,.40) 34%,rgba(10,4,18,0) 56%);
}
/* ---------------------------------------- ekrandaki hikâye arayüzü
   Telefonların içi bir Instagram hikâyesidir: üstte bölümlere ayrılmış
   ilerleme çubuğu, halkalı avatar ve kullanıcı adı; ortada ürünün kendi
   fotoğrafı; altta çıkartma (kampanya kartı) ve yanıt şeridi. Amaç
   tanıtım: ziyaretçi kapağa baktığında platformun ürettiği paylaşımın
   nasıl göründüğünü, arayüzü öğrenmeden tanır.

   Ölçüler --w üzerinden hesaplanır; sahnedeki büyük ve küçük telefon
   aynı hikâyenin iki boyudur. */
/* Açık fotoğrafların üstünde %34 beyaz iz kayboluyordu; ince bir
   gölge çubuğu her karede okunur tutar. */
.hikaye-cubuk{filter:drop-shadow(0 1px 1.5px rgba(10,4,18,.5))}
.hikaye-cubuk{
  position:absolute; top:calc(var(--w,252px) * .148);
  left:calc(var(--w,252px) * .042); right:calc(var(--w,252px) * .042); z-index:2;
  display:flex; gap:calc(var(--w,252px) * .012);
  height:max(2px,calc(var(--w,252px) * .009));
}
.hikaye-cubuk i{
  flex:1; display:block; overflow:hidden;
  border-radius:999px; background:rgba(255,255,255,.34);
}
.hikaye-cubuk i span{display:block; height:100%; width:0; background:#fff; border-radius:999px}
/* İzlenmekte olan bölüm gerçekten dolar: süresi betikten verilir, böylece
   çubuk sıradaki kampanyaya geçişi önceden haber eder. Doğrusal geçiş
   bilinçli — hızlanan bir eğri hikâyenin sonunu erken bitmiş gösterir. */
.hikaye-cubuk i span.akan{transition:width linear}

/* ---- kampanyalar arası geçiş ----
   Kart, kapak ve üst şerit birlikte sönümlenir; ilerleme çubuğu ile
   kasa sabit kalır. Böylece sahne "yeniden çizilmiş" gibi değil, aynı
   telefonda sıradaki hikâyeye geçilmiş gibi okunur. */
.telefon .hikaye-kapak,
.telefon .hikaye-ust,
.telefon .hikaye-yigin{transition:opacity .3s ease}
.telefon.gecis .hikaye-kapak,
.telefon.gecis .hikaye-ust,
.telefon.gecis .hikaye-yigin{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hikaye-cubuk i span.akan{transition:none}
  .telefon .hikaye-kapak,
  .telefon .hikaye-ust,
  .telefon .hikaye-yigin{transition:none}
}
.hikaye-ust{
  position:absolute; top:calc(var(--w,252px) * .192);
  left:calc(var(--w,252px) * .042); right:calc(var(--w,252px) * .042); z-index:2;
  display:flex; align-items:center; gap:calc(var(--w,252px) * .03); color:#fff;
}
/* Avatar, hikâye halkasının içinde durur: dışta lambader–menekşe halka,
   içte kasa rengiyle ince bir ayraç. Şeritteki .hikaye-halka ile aynı
   fikir, telefon ölçeğinde. */
.hikaye-av{
  width:calc(var(--w,252px) * .092); height:calc(var(--w,252px) * .092);
  flex:none; border-radius:50%;
  display:grid; place-items:center; background:var(--green);
  box-shadow:
    0 0 0 1.5px rgba(10,4,18,.9),
    0 0 0 calc(1.5px + max(1.5px,var(--w,252px) * .008)) var(--brass);
}
.hikaye-av svg{width:56%; height:56%; fill:none; stroke:var(--brass); stroke-width:1.8}
.hikaye-av{font-size:max(9.5px,calc(var(--w,252px) * .042)); font-weight:700; color:var(--brass); text-transform:uppercase}
.hikaye-ust b{font-size:max(10.5px,calc(var(--w,252px) * .046)); font-weight:600; letter-spacing:.01em}
.hikaye-sure{margin-left:auto; font-size:max(9.5px,calc(var(--w,252px) * .040)); color:rgba(255,255,255,.72)}
/* Hikâyenin üç noktası: gerçek arayüzün tanıdık işareti, süs. */
.hikaye-nokta{
  flex:none; display:flex; gap:calc(var(--w,252px) * .009);
}
.hikaye-nokta i{
  width:max(2px,calc(var(--w,252px) * .011)); height:max(2px,calc(var(--w,252px) * .011));
  border-radius:50%; background:rgba(255,255,255,.85);
}
.hikaye-alt{
  position:absolute; left:calc(var(--w,252px) * .05); right:calc(var(--w,252px) * .05);
  bottom:calc(var(--w,252px) * .195); z-index:2; margin:0;
  color:#fff; font-size:max(11px,calc(var(--w,252px) * .048)); line-height:1.42; font-weight:500;
  white-space:normal; text-shadow:0 1px 10px rgba(0,0,0,.45);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Gerçek paylaşım hikâyesi: kapak görseli, çıkartma ve tek eylem.
   Telefonun tamamı bağlantıdır. */
a.telefon-bag{display:block; text-decoration:none; color:inherit}
.hikaye-kapak{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---- çıkartma: hikâyenin üstüne yapıştırılmış kampanya kartı ----
   Instagram'ın bağış/bağlantı çıkartmasının işi: fotoğrafın önünde duran,
   hafifçe eğik, AÇIK zeminli küçük bir kart. Açık zemin bilinçli — koyu
   fotoğrafın üstünde beyaz kart hem okunur hem "yapıştırılmış" duruyor,
   yazıyı fotoğrafa gömen koyu kutu ise kayboluyordu. Kart açık olduğu
   için içindeki bütün metin renkleri burada açıkça yazılır; sayfanın
   koyu bant kuralları buraya sızmamalı. */
/* ---- çıkartma yığını ----
   Kart eskiden tek başına mutlak konumlanıyordu ve alttaki yanıt
   şeridinin ÜSTÜNE biniyordu (ölçülen boşluk: küçük telefonda -6px,
   büyükte -5px). İki çıkartma da artık alta hizalı tek bir sütunda
   durur; sütunun tabanı şeridin üstünde başlar, bu yüzden kart ne
   kadar uzarsa uzasın çakışma olamaz. */
.hikaye-yigin{
  position:absolute; left:calc(var(--w,252px) * .05); right:calc(var(--w,252px) * .05);
  bottom:calc(var(--w,252px) * .285); z-index:2;
  display:grid; gap:calc(var(--w,252px) * .034); justify-items:start;
}

/* ---- ürün etiketi ----
   Instagram'ın alışveriş etiketi: fotoğrafın üstünde duran beyaz hap.
   Ürünün HANGİ MAĞAZADAN alındığını söyler — kampanyanın alışveriş
   tarafı. Kart yalnızca "ne kadar kaldı"yı anlatıyordu; satıcının
   görünmemesi hikâyeyi bir bağış çağrısına benzetiyordu. */
.urun-etiket{
  display:inline-flex; align-items:center; max-width:100%;
  gap:calc(var(--w,252px) * .024);
  padding:calc(var(--w,252px) * .022) calc(var(--w,252px) * .044);
  border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--ink);
  font-size:max(9px,calc(var(--w,252px) * .038)); font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 calc(var(--w,252px) * .012) calc(var(--w,252px) * .032) rgba(10,4,18,.45);
}
.urun-etiket svg{
  width:calc(var(--w,252px) * .05); height:calc(var(--w,252px) * .05); flex:none;
  fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.hikaye-icerik{
  width:100%;
  display:grid; gap:calc(var(--w,252px) * .018);
  padding:calc(var(--w,252px) * .048) calc(var(--w,252px) * .05);
  border-radius:calc(var(--w,252px) * .062);
  background:rgba(255,255,255,.95);
  color:var(--ink);
  transform:rotate(-1.4deg);
  box-shadow:0 calc(var(--w,252px) * .04) calc(var(--w,252px) * .085) calc(var(--w,252px) * -.04) rgba(10,4,18,.6);
}
.hikaye-an{
  font-size:max(8.5px,calc(var(--w,252px) * .036)); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mor); text-shadow:none;
}
/* Telefon hikâyesinin başlığı. DOĞRUDAN çocuk seçilir: ".hikaye-icerik b"
   oran satırındaki yüzdeyi de yakalıyor, yüzdeyi başlık puntosunda
   gösteriyordu. ".hikaye-ad" da eklenirse şeridin altyazılarını beyaza
   çeviriyordu, o yüzden bu kural yalnızca burada kalır. */
/* Başlık DAİMA iki satırlık yer kaplar. Kampanya başlıkları bir ya da iki
   satır olabiliyordu; kart alta hizalı olduğu için her geçişte üst kenarı
   bir satır boyu zıplıyor, sahne oynak görünüyordu. İki satır ayrılınca
   kart yüksekliği kampanyadan bağımsız sabit kalır ve akış yerinde döner. */
.hikaye-icerik > b{
  color:var(--ink);
  font-family:var(--font-baslik);
  font-size:max(12.5px,calc(var(--w,252px) * .056));
  font-weight:600; line-height:1.22; letter-spacing:-.01em;
  text-shadow:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.44em;
  /* Tek satırlık başlıkta artan pay alta yığılmasın, iki yana dağılsın:
     aksi halde başlıkla ürün satırı arasında boş bir satır duruyordu. */
  -webkit-box-pack:center;
}
/* Tanıtılan ürünün kendisi: çıkartmanın asıl konusu, tek satır. */
.hikaye-urun{
  font-size:max(9.5px,calc(var(--w,252px) * .04)); line-height:1.35; color:var(--ink-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hikaye-bar{
  height:max(3px,calc(var(--w,252px) * .014)); border-radius:999px;
  background:var(--mor-soft); overflow:hidden;
}
.hikaye-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--mor),var(--brass));
}
/* Oran satırı tek satırdır: "…tamamlandı · N kişi katıldı" küçük
   telefonda ikinci satıra kırılıp kartı dengesiz gösteriyordu. İki uç
   arasına yayılınca hem sığar hem sayılar hizalı okunur. */
.hikaye-oran{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(var(--w,252px) * .04);
  font-size:max(9px,calc(var(--w,252px) * .038)); line-height:1.35; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; text-shadow:none; white-space:nowrap;
}
.hikaye-oran b{font-weight:600; color:var(--ink)}
.hikaye-oran i{font-style:normal; overflow:hidden; text-overflow:ellipsis}
.hikaye-eylem{
  display:block; text-align:center;
  margin-top:calc(var(--w,252px) * .012);
  padding:calc(var(--w,252px) * .028) calc(var(--w,252px) * .05); border-radius:999px;
  background:var(--green); color:var(--on-green);
  font-size:max(10.5px,calc(var(--w,252px) * .044)); font-weight:600; letter-spacing:.01em;
}
a.telefon-bag:hover .hikaye-eylem{background:var(--mor)}
a.telefon-bag:focus-visible{
  outline:2px solid var(--brass); outline-offset:6px;
  border-radius:calc(var(--w,252px) * .152);
}

/* ---- yanıt şeridi: hikâyenin alt kenarı ----
   Süs değil, bağlam: bu şerit olmadan ekran bir hikâye gibi değil bir
   reklam görseli gibi okunuyordu. Tıklanabilir bir alan değildir. */
.hikaye-yanit{
  position:absolute; left:calc(var(--w,252px) * .05); right:calc(var(--w,252px) * .05);
  bottom:calc(var(--w,252px) * .078); z-index:2;
  display:flex; align-items:center; gap:calc(var(--w,252px) * .03);
  pointer-events:none;
}
.hikaye-yanit span{
  flex:1; min-width:0;
  padding:calc(var(--w,252px) * .026) calc(var(--w,252px) * .046);
  border:1px solid rgba(255,255,255,.55); border-radius:999px;
  color:rgba(255,255,255,.82); font-size:max(9.5px,calc(var(--w,252px) * .04));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hikaye-yanit svg{
  width:calc(var(--w,252px) * .056); height:calc(var(--w,252px) * .056); flex:none;
  fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* Tepkiler: sağ alt köşeden yükselen küçük işaretler. */
.hikaye-tepki{
  position:absolute; right:calc(var(--w,252px) * .03); bottom:calc(var(--w,252px) * .26);
  z-index:2; --yuk:calc(var(--w,252px) * -.62);
  width:calc(var(--w,252px) * .30); height:calc(var(--w,252px) * .66);
  overflow:hidden; pointer-events:none;
}
.hikaye-tepki span{
  position:absolute; bottom:0; font-size:max(14px,calc(var(--w,252px) * .067)); line-height:1;
  animation:tepki-yuksel 3.4s cubic-bezier(.25,.6,.35,1) forwards;
  will-change:transform,opacity;
}
@keyframes tepki-yuksel{
  0%{transform:translate(0,6px) scale(.6); opacity:0}
  14%{transform:translate(0,-10px) scale(1); opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--kay,-14px),var(--yuk,-176px)) scale(.9); opacity:0}
}
@media (prefers-reduced-motion: reduce){.hikaye-tepki{display:none}}

.telefon-cizgi{
  position:absolute; left:50%; bottom:calc(var(--w,252px) * .028);
  transform:translateX(-50%); z-index:3;
  display:block; width:calc(var(--w,252px) * .30); height:calc(var(--w,252px) * .0145);
  border-radius:999px; background:rgba(255,255,255,.55);
}