/* ============================================================
   menüdesin — CANLI KATMAN
   Düzlüğü kıran şey renk değil DERİNLİK: katmanlı gölge, iç ışık,
   cam bulanıklığı, mikro hareket. Hepsi transform/opacity ile
   çalışır (kaydırma sırasında kare düşmez).
   Sıra: tailwind → tema.css → canli.css (en son)
   ============================================================ */

/* ---------- 0. ORTAK EĞRİLER ---------- */
:root{
  --yay:cubic-bezier(.34,1.56,.64,1);      /* hafif geri tepen */
  --yumusak:cubic-bezier(.22,1,.36,1);
  --sari-parlak:#FFE24D;
  --sari-koyu:#EFC400;
}

/* ---------- 1. DÜĞMELER: 3D + CAM + IŞIK ---------- */
.btn,.btn-gold,.bg-gold,.cta,.pr-btn,.b1,.nav-b,.wk-p,.pf-alt .pr-btn{
  position:relative;
  isolation:isolate;
  transition:transform .22s var(--yay), box-shadow .28s var(--yumusak), filter .2s ease;
}
/* sarı ana düğme — üstten aydınlık, alttan kor */
.btn-gold,.bg-gold,.cta,.pr-btn-ana,.pr-btn-demo,.nav-b,.b1{
  background:linear-gradient(180deg,var(--sari-parlak) 0%,#FFD400 46%,var(--sari-koyu) 100%) !important;
  color:#0F0D14 !important;
  border:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(120,90,0,.28),
    0 1px 2px rgba(15,13,20,.10),
    0 10px 22px -10px rgba(255,196,0,.75),
    0 22px 44px -26px rgba(15,13,20,.45) !important;
}
.btn-gold:hover,.bg-gold:hover,.cta:hover,.pr-btn-ana:hover,.pr-btn-demo:hover,.nav-b:hover,.b1:hover{
  transform:translateY(-2.5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(120,90,0,.3),
    0 2px 4px rgba(15,13,20,.10),
    0 18px 34px -12px rgba(255,196,0,.85),
    0 34px 60px -30px rgba(15,13,20,.5) !important;
}
.btn-gold:active,.bg-gold:active,.cta:active,.pr-btn-ana:active,.nav-b:active,.b1:active{
  transform:translateY(1px) scale(.988);
  box-shadow:
    inset 0 2px 5px rgba(120,90,0,.35),
    0 4px 12px -6px rgba(255,196,0,.6) !important;
}
/* üstünden geçen ışık şeridi */
.btn-gold::after,.cta::after,.pr-btn-ana::after,.nav-b::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 48%,transparent 58%);
  transform:translateX(-120%);
}
.btn-gold:hover::after,.cta:hover::after,.pr-btn-ana:hover::after,.nav-b:hover::after{
  animation:parla .85s var(--yumusak) forwards;
}
@keyframes parla{ to{ transform:translateX(120%) } }

/* ikincil düğme — cam */
.pr-btn-ikinci,.b2,.btn:not(.btn-gold):not(.bg-ink):not([class*="bg-gold"]){
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(15,13,20,.10) !important;
  color:#0F0D14 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -12px rgba(15,13,20,.35);
}
/* koyu düğme (bg-ink) camlaşmaz — kendi derinliğini alır */
.bg-ink{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 26px -14px rgba(15,13,20,.75) !important;
  transition:transform .22s var(--yay),box-shadow .28s var(--yumusak);
}
.bg-ink:hover{ transform:translateY(-2.5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 38px -16px rgba(15,13,20,.8) !important; }
.pr-btn-ikinci:hover,.b2:hover,.btn:not(.btn-gold):not(.bg-ink):hover{
  transform:translateY(-2px);
  border-color:rgba(108,43,217,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 28px -14px rgba(108,43,217,.45);
}

/* mockup içindeki onay/işlem düğmeleri (paket servis fişi vb.) */
.pk-onay,.onay-btn,.mock-onay,[class*="onayla"]{
  background:linear-gradient(180deg,var(--sari-parlak),var(--sari-koyu)) !important;
  color:#0F0D14 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px -8px rgba(255,196,0,.8) !important;
  animation:nabiz 2.6s ease-in-out infinite;
}
@keyframes nabiz{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px -8px rgba(255,196,0,.8) }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -8px rgba(255,196,0,1) }
}

/* ---------- 2. ÜST BAR: CAM ---------- */
.nav{
  background:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(15,13,20,.07) !important;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.nav.kaydi{
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 10px 30px -20px rgba(15,13,20,.5);
}

/* ---------- 3. HERO: AMBİYANS IŞIĞI ---------- */
header,.pr-hero,#top{ position:relative; }
header::before,.pr-hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 34% at 16% 18%, rgba(255,212,0,.13), transparent 70%),
    radial-gradient(38% 30% at 84% 10%, rgba(108,43,217,.09), transparent 72%),
    radial-gradient(30% 26% at 64% 80%, rgba(255,212,0,.07), transparent 74%);
  animation:isikSuz 18s ease-in-out infinite alternate;
}
@keyframes isikSuz{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(1.5%,-1.5%,0) scale(1.04) }
  100%{ transform:translate3d(-1.5%,1%,0) scale(1.02) }
}
header > *,.pr-hero > *{ position:relative; z-index:1; }

/* ---------- 4. KARTLAR: KATMAN VE YÜKSELME ---------- */
.hb,.kart,.pr-adim,.pr-s,.pr-fiyat,.mn-kap,.wa-kredi,.rounded-xl2.bg-card{ overflow:hidden; }
.hb,.kart,.pr-adim,.pr-s,.pr-fiyat,.mn-kap,.wa-kredi,.rounded-xl2.bg-card{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFB 100%) !important;
  border:1px solid rgba(15,13,20,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,13,20,.04),
    0 18px 40px -28px rgba(15,13,20,.45) !important;
  transition:transform .3s var(--yumusak),box-shadow .3s var(--yumusak),border-color .25s ease;
}
.hb:hover,.kart:hover,.pr-adim:hover{
  transform:translateY(-4px);
  border-color:rgba(108,43,217,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(15,13,20,.05),
    0 30px 60px -30px rgba(108,43,217,.42) !important;
}
/* kartın üstünde ince renk çizgisi — hover'da açılır */
/* video kapaklı kartlarda üst çizgi kapağın altında kalıyordu */
.hb[data-video]::before,.hb.kapakli::before{ display:none }
.hb::before,.pr-adim::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#FFD400,#6C2BD9);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--yumusak);
}
.hb:hover::before,.pr-adim:hover::before{ transform:scaleX(1); }

/* ---------- 5. İKONLAR: KABARTMA ---------- */
.hb-ic,.kart .ik,.se-ic,.il-ik,.pi,.w-7.h-7.rounded-full{
  background:linear-gradient(180deg,#FFFFFF,#F1EFF7) !important;
  border:1px solid rgba(15,13,20,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(108,43,217,.06),
    0 6px 14px -8px rgba(15,13,20,.35);
  color:#6C2BD9 !important;
  transition:transform .3s var(--yay),box-shadow .3s var(--yumusak);
}
.hb:hover .hb-ic,.kart:hover .ik{
  transform:translateY(-2px) rotate(-3deg) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 12px 22px -10px rgba(108,43,217,.5);
}
.il-ik{ color:#fff !important; }

/* ---------- 6. ÜST ŞERİT (marquee) ---------- */
.sec-ayrac,.marquee,.hb-bas{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hb-bas{
  font-family:var(--td-fm) !important;
  letter-spacing:.14em;
  background:linear-gradient(90deg,#0F0D14 0%,#6C2BD9 45%,#0F0D14 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  background-size:220% 100%;
  animation:yaziAk 9s linear infinite;
}
@keyframes yaziAk{ to{ background-position:220% 0 } }

/* ---------- 7. ROZET / ETİKET: CAM PILL ---------- */
.sec-etiket .se-rota,.pr-etiket,.rozet,.pf-rozet,.mk-palet{
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 20px -14px rgba(108,43,217,.5);
}

/* ---------- 8. GİRİŞ ANİMASYONU ---------- */
.reveal{
  opacity:0;transform:translate3d(0,18px,0) scale(.99);
  transition:opacity .7s var(--yumusak),transform .7s var(--yumusak);
  will-change:opacity,transform;
}
.reveal.is-in{ opacity:1;transform:none; }

/* ---------- 9. TELEFON MOCKUPU: DERİNLİK ---------- */
.mk-olcek > #mkTel,#mkTel.mk-cerceve{
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.10) inset,
    0 2px 3px rgba(255,255,255,.16) inset,
    0 40px 80px -34px rgba(15,13,20,.62),
    0 10px 24px -14px rgba(108,43,217,.35) !important;
}
.tb-cerceve{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 2px 2px rgba(255,255,255,.85) inset,
    0 30px 66px -30px rgba(0,0,0,.75),
    0 12px 26px -16px rgba(255,196,0,.35) !important;
}

/* ---------- 10. BAĞLANTI ALTI ÇİZGİSİ ---------- */
.nav-l a,.links a,.foot-col a{
  position:relative;
}
.nav-l a::after,.links a::after,.foot-col a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,#FFD400,#6C2BD9);
  transform:scaleX(0);transform-origin:right;transition:transform .32s var(--yumusak);
}
.nav-l a:hover::after,.links a:hover::after,.foot-col a:hover::after{
  transform:scaleX(1);transform-origin:left;
}

/* ---------- 11. FİYAT KARTI: PARILTI ---------- */
.pr-fiyat{ overflow:hidden; }
.pr-fiyat::after{
  content:"";position:absolute;width:60%;height:200%;top:-50%;left:-70%;
  background:linear-gradient(105deg,transparent,rgba(255,212,0,.18),transparent);
  animation:kartParla 7s ease-in-out infinite;pointer-events:none;
}
@keyframes kartParla{ 0%,72%{ left:-70% } 100%{ left:130% } }

/* ---------- 12. HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- EKSİK ÖLÇÜ SINIFLARI ----------
   Tailwind derlenmiş hâlde; sayfalarda kullanılan bazı ölçüler
   CSS'te karşılıksız kalmış (ör. text-[34px], sm:text-[50px]) —
   o başlıklar gövde boyutunda kalıyordu. Eksikler tamamlandı. */
.text-\[34px\]{ font-size:34px }
.text-\[36px\]{ font-size:36px }
.text-\[40px\]{ font-size:40px }
.text-\[46px\]{ font-size:46px }
@media(min-width:640px){
  .sm\:text-\[34px\]{ font-size:34px }
  .sm\:text-\[36px\]{ font-size:36px }
  .sm\:text-\[40px\]{ font-size:40px }
  .sm\:text-\[46px\]{ font-size:46px }
  .sm\:text-\[50px\]{ font-size:50px }
  .sm\:text-\[54px\]{ font-size:54px }
}