/* ==========================================================================
   SEF-DETAY sayfa katmanı — Fatma Öner Dilbaz
   Editoryal hero + imza çizimi · seans satış bloğu · kurs şeridi ·
   kariyer zaman çizelgesi · quote · CTA
   style.css'e dokunmaz; yalnız bu sayfanın parçalarını giydirir.
   ========================================================================== */

/* 3D başlık gölgesi — eriyerek biten katmanlar (sert ofset yok) */
.t3d{text-shadow:0 1px 2px rgba(15,10,5,.35),0 10px 24px rgba(15,10,5,.4),0 30px 60px rgba(15,10,5,.45)}

/* ---------------------------------------------------------------- HERO */
.sd-hero{position:relative;background:var(--esp);color:var(--cream);overflow:clip}
.sd-hero::before{
  content:"";position:absolute;width:52vw;height:52vw;top:-16vw;right:-12vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,172,92,.13),transparent 70%);pointer-events:none;
}
.sd-hero::after{
  content:"";position:absolute;width:44vw;height:44vw;bottom:-22vw;left:-14vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(160,118,47,.1),transparent 72%);pointer-events:none;
}
.sd-hero .container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:clamp(28px,4.5vw,76px);align-items:center;
  padding-block:clamp(26px,4.2vh,52px);
}
.sd-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--cream3)}
.sd-crumb a{transition:color 350ms var(--e-manidar)}
.sd-crumb a:hover{color:var(--brass2)}
.sd-crumb span[aria-hidden]{opacity:.5}
.sd-hero .eyebrow{margin-top:18px}
.sd-name{color:var(--cream);margin-top:12px;font-weight:800;letter-spacing:-.02em}
.sd-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sd-chip{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;padding:9px 16px;
  border:1px solid var(--lined);border-radius:var(--r-pill);
  color:var(--cream2);background:rgba(241,233,215,.05);white-space:nowrap;
  transition:transform 350ms var(--e-kagit),border-color 350ms var(--e-manidar),color 350ms var(--e-manidar),background 350ms var(--e-manidar);
}
.sd-chip:hover{transform:translateY(-3px);border-color:rgba(216,172,92,.55);color:var(--brass2);background:rgba(216,172,92,.08)}
.sd-sig{
  margin-top:22px;font-style:italic;font-weight:500;
  font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--cream2);max-width:44ch;
  padding-left:18px;border-left:2px solid var(--brass2);
}
.sd-sig b{color:var(--brass2);font-weight:700}
.sd-lead{margin-top:16px;font-size:15.5px;line-height:1.65;color:var(--cream3);max-width:52ch}
.sd-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.sd-ctas .btn-line{border-color:rgba(241,233,215,.32);color:var(--cream)}
.sd-facts{
  display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--lined);
}
.sd-facts div{font-size:12.5px;color:var(--cream3);letter-spacing:.02em}
.sd-facts b{display:block;font-family:var(--serif);font-weight:700;font-size:18px;color:var(--cream);font-variant-numeric:tabular-nums}

/* portre + imza esprisi */
.sd-port{
  position:relative;width:100%;aspect-ratio:3/4;max-height:min(74vh,640px);
  justify-self:end;border-radius:22px;overflow:hidden;margin:0;
  box-shadow:0 1px 2px rgba(0,0,0,.22),0 14px 30px rgba(0,0,0,.3),0 46px 92px rgba(0,0,0,.4);
}
.sd-port .zoom{position:absolute;inset:0;background-size:cover;background-position:center 20%;transition:transform 600ms var(--e-lux);filter:saturate(.92)}
.sd-port:hover .zoom{transform:scale(1.05);filter:saturate(1.05)}
.sd-port::after{content:"";position:absolute;inset:0;background:linear-gradient(186deg,transparent 52%,rgba(15,10,5,.62));pointer-events:none}
.sd-badge{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);background:rgba(15,10,5,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(216,172,92,.4);border-radius:var(--r-pill);padding:8px 14px;
}
.sd-sign{position:absolute;right:16px;bottom:34px;width:clamp(150px,52%,225px);z-index:3;pointer-events:none;overflow:visible}
.sd-sign path{
  fill:none;stroke:var(--brass2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 2px 8px rgba(15,10,5,.5));
}
.sd-sign path:nth-child(1){transition:stroke-dashoffset 1.3s var(--e-manidar) 90ms}
.sd-sign path:nth-child(2){transition:stroke-dashoffset .45s var(--e-manidar) 1.42s}
.sd-sigcap{
  position:absolute;left:16px;right:16px;bottom:12px;z-index:3;
  font-size:11.5px;font-style:italic;color:var(--cream3);letter-spacing:.04em;
  opacity:0;transform:translateY(6px);
  transition:opacity 450ms var(--e-manidar) 1.5s,transform 450ms var(--e-manidar) 1.5s;
}
/* masaüstü: imza hover'da atılır, el çekilince silinir (tekrar oynanabilir espri) */
@media (hover:hover){
  .sd-port:hover .sd-sign path{stroke-dashoffset:0}
  .sd-port:hover .sd-sigcap{opacity:1;transform:none}
}
/* dokunmatik / reduced-motion: JS görünür olunca .sign verir, imza kalıcı atılır */
.sd-port.sign .sd-sign path{stroke-dashoffset:0}
.sd-port.sign .sd-sigcap{opacity:1;transform:none}

/* ------------------------------------------------------ SEANS BLOĞU */
.sd-cols{grid-template-columns:1fr 420px}
.sd-list{display:flex;flex-direction:column;gap:12px;margin-top:26px;font-size:15px;color:var(--cream2)}
.sd-list li{position:relative;padding-left:26px;transition:transform 250ms var(--e-manidar)}
.sd-list li::before{content:"—";position:absolute;left:0;color:var(--brass2)}
.sd-list li:hover{transform:translateX(4px)}
.sd-buy{background:var(--esp2);border-color:var(--lined)}
.sd-buy .amt{margin-top:12px;color:var(--appetite-2)}
.sd-buy .amt small{color:var(--cream3)}
.sd-buy ul,.sd-buy li{color:var(--cream2)}
.sd-buy li::before{color:var(--brass2)}
.sd-buy .note{color:var(--cream3)}

/* --------------------------------------------------- KURS ŞERİDİ */
.sd-railhead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,42px);
}
.sd-hint{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;
  transition:opacity 450ms var(--e-manidar),transform 450ms var(--e-manidar);
}
.sd-hint i{font-style:normal;color:var(--brass);animation:sdNudge 1.6s var(--e-manidar) infinite}
.sd-hint.off{opacity:0;transform:translateX(10px);pointer-events:none}
@keyframes sdNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.sd-rail{grid-auto-columns:minmax(290px,400px)}
.sd-rail .ccard .foot .lnk{font-size:14px}

/* --------------------------------------------- KARİYER ZAMAN ÇİZELGESİ */
.sd-tlsec{background:var(--paper2);border-top:1px solid var(--line)}
.sd-tl{position:relative;--tp:0;max-width:820px;margin-inline:auto;padding-left:clamp(44px,6vw,72px)}
.sd-tl::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--line);
}
.sd-tline{
  position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px;z-index:1;
  background:linear-gradient(180deg,var(--brass),var(--appetite));
  transform:scaleY(var(--tp));transform-origin:top;
  transition:transform 120ms linear;
}
.sd-stop{position:relative;padding-block:clamp(20px,2.6vw,32px)}
.sd-stop + .sd-stop{border-top:1px dashed var(--line)}
.sd-dot{
  position:absolute;left:calc(-1 * clamp(44px,6vw,72px) + 3px);top:calc(clamp(20px,2.6vw,32px) + 6px);
  width:18px;height:18px;border-radius:50%;z-index:2;
  background:var(--paper2);border:2px solid var(--ink3);
  transition:border-color 450ms var(--e-manidar),background 450ms var(--e-manidar),transform 350ms var(--e-kagit),box-shadow 450ms;
}
.sd-stop.on .sd-dot{
  background:var(--appetite);border-color:var(--appetite);transform:scale(1.18);
  box-shadow:0 1px 2px rgba(26,18,7,.08),0 6px 16px rgba(160,118,47,.35);
}
.sd-no{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);
  transition:color 450ms var(--e-manidar);
}
.sd-stop.on .sd-no{color:var(--brass)}
.sd-stop h3{margin-top:8px;font-weight:700}
.sd-stop p{margin-top:8px;color:var(--ink2);max-width:56ch;font-size:15.5px}
.sd-stop h3,.sd-stop p{
  opacity:.28;transform:translateY(10px);
  transition:opacity 600ms var(--e-manidar),transform 600ms var(--e-manidar);
}
.sd-stop.on h3,.sd-stop.on p{opacity:1;transform:none}

/* ------------------------------------------------------------- QUOTE */
.sd-quotewrap{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,32px)}
.sd-quote{max-width:780px;width:100%;text-align:left}
.sd-quote p{font-size:clamp(20px,2vw,27px);font-weight:500}
.sd-av{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#FFF8EA;letter-spacing:.04em}

/* ================================================================ 1020px */
@media (max-width:1020px){
  .sd-hero .container{grid-template-columns:1fr;gap:26px;padding-block:22px}
  .sd-port{order:-1;justify-self:stretch;aspect-ratio:4/5;max-height:56vh}
  .sd-name{font-size:clamp(38px,7vw,64px)}
  .sd-cols{grid-template-columns:1fr}
  .sd-buy{position:relative;top:0}
  .sd-tl{padding-left:44px}
  .sd-dot{left:-41px}
}

/* ================================================================ 640px */
@media (max-width:640px){
  /* mobil: hero kartlaşır, çipler yatay kayar, dokunma hedefleri büyür */
  .sd-hero .container{padding-block:16px;gap:20px}
  .sd-port{aspect-ratio:1/1.08;max-height:none;border-radius:18px}
  .sd-sign{width:56%;right:12px;bottom:30px}
  .sd-sigcap{font-size:10.5px;left:12px;right:12px}
  .sd-crumb{font-size:12px}
  .sd-chips{
    flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none;
  }
  .sd-chips::-webkit-scrollbar{display:none}
  .sd-chip{scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center}
  .sd-sig{font-size:16.5px;padding-left:14px}
  .sd-lead{font-size:14.5px}
  .sd-ctas{flex-direction:column;align-items:stretch}
  .sd-ctas .btn{justify-content:center}
  .sd-facts{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:none;padding-top:0;
  }
  .sd-facts div{
    background:rgba(241,233,215,.05);border:1px solid var(--lined);border-radius:14px;
    padding:12px 14px;
  }
  .sd-list{font-size:14px;gap:10px}
  .sd-railhead{align-items:center}
  .sd-hint{padding:10px 16px}
  .sd-rail{grid-auto-columns:84%}
  .sd-tl{padding-left:38px}
  .sd-dot{left:-35px;width:15px;height:15px}
  .sd-stop p{font-size:14.5px}
  .sd-quote p{font-size:19px}
}

/* ============================================== hareket azaltma & zoom */
@media (prefers-reduced-motion:reduce){
  .sd-hint i{animation:none}
  .sd-sign path{transition:none}
  .sd-sigcap{transition:none}
  .sd-tline{transition:none}
  .sd-stop h3,.sd-stop p{opacity:1;transform:none;transition:none}
  .sd-chip:hover,.sd-list li:hover{transform:none}
}
