/* ======================================================
   BYBORAY — Premium Cinematic Real Estate Website
   ====================================================== */

:root{
  --ink:#050608;
  --bg-2:#0b0c10;
  --bg-3:#111318;
  --navy:#0b1220;
  --navy-2:#0f1b2e;
  --gold:#d6a943;
  --gold-light:#ffe3a0;
  --gold-deep:#8a6420;
  --ember:#f0873a;
  --text-soft:rgba(245,240,228,0.78);
  --text-mute:rgba(245,240,228,0.55);
  --line:rgba(214,169,67,0.18);
  --line-strong:rgba(214,169,67,0.38);
  --ease:cubic-bezier(.16,.84,.32,1);
  --radius:3px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{background:var(--ink);color:#f5f0e4;font-family:'Manrope',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--gold);color:#0a0a0a;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}
svg{width:18px;height:18px;flex-shrink:0;}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media (max-width:720px){.wrap{padding:0 20px;}}

/* Marble / dark texture backgrounds */
body{
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(214,169,67,0.05), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(214,169,67,0.04), transparent 60%);
  background-attachment:fixed;
}

.eyebrow{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.24em;color:var(--gold);
  font-weight:700;display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--gold);display:inline-block;}

h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;letter-spacing:.01em;}
.h2{
  font-size:clamp(28px,3.6vw,44px);font-weight:700;line-height:1.15;color:#f8f3e6;margin-bottom:18px;
}
.lead{font-size:16px;line-height:1.75;color:var(--text-soft);max-width:600px;margin-bottom:14px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:var(--radius);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn svg{width:15px;height:15px;}
.btn-primary{
  background:linear-gradient(120deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  color:#1a1204;box-shadow:0 10px 30px -8px rgba(214,169,67,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -6px rgba(214,169,67,.65);}
.btn-ghost{border:1px solid rgba(255,227,160,.4);color:var(--gold-light);background:rgba(255,255,255,.02);}
.btn-ghost:hover{background:rgba(214,169,67,.12);transform:translateY(-2px);border-color:var(--gold);}
.btn-outline{border:1px solid var(--line-strong);color:#f5f0e4;padding:15px 26px;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}

/* ======================================================
   NAV
   ====================================================== */
.vip-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,56px);
  background:linear-gradient(to bottom,rgba(5,6,8,.65),rgba(5,6,8,0));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .4s var(--ease),padding .4s var(--ease);
}
.vip-nav.scrolled{background:rgba(8,10,14,.9);padding:12px clamp(20px,4vw,56px);box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid var(--line);}
.vip-logo{display:flex;align-items:center;gap:10px;letter-spacing:.14em;font-weight:700;font-size:14px;}
.vip-logo img{width:34px;height:34px;object-fit:contain;flex-shrink:0;}
.vip-logo span{color:var(--gold-light);}
.vip-logo small{display:block;font-family:'Manrope';font-weight:500;font-size:8.5px;letter-spacing:.18em;color:var(--gold);opacity:.75;}

.vip-links{display:flex;align-items:center;gap:30px;}
.vip-links > li{position:relative;}
.vip-links a{color:rgba(245,240,228,.85);font-size:13px;font-weight:600;letter-spacing:.03em;position:relative;padding-bottom:4px;transition:color .25s;white-space:nowrap;}
.vip-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--gold);transition:width .3s var(--ease);}
.vip-links a:hover{color:var(--gold-light);}
.vip-links a:hover::after,.vip-links a.active::after{width:100%;}

.vip-contact{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gold-light);white-space:nowrap;}

.nav-login-link{
  display:flex;align-items:center;white-space:nowrap;flex-shrink:0;
  padding:7px 14px;border:1px solid var(--line-strong);border-radius:20px;
  color:var(--gold-light);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  background:rgba(255,255,255,.02);transition:background .2s,border-color .2s;
}
.nav-login-link:hover{background:rgba(214,169,67,.1);border-color:var(--gold);}

/* ---------- DESKTOP NAV — CONTROLLED SHRINK BEFORE THE HAMBURGER TAKES OVER ----------
   10 nav links + logo + lang switcher + phone + login button no longer all fit on one
   row past ~1600px, so gaps/font-sizes step down twice before the nav hands off to the
   hamburger menu at 1400px (see MOBILE MENU block below) — nothing is ever clipped or
   left to overflow in between. */
@media (max-width:1600px){
  .vip-nav{padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px);}
  .vip-links{gap:18px;}
  .vip-links a{font-size:12px;}
  .vip-logo{font-size:13px;}
}
@media (max-width:1450px){
  .vip-links{gap:13px;}
  .vip-links a{font-size:11.5px;}
  .vip-contact{gap:5px;font-size:11.5px;}
  .vip-contact svg{width:14px;height:14px;}
  .nav-login-link{padding:6px 11px;font-size:10.5px;}
  .lang-current{padding:6px 9px;font-size:10.5px;}
}

/* ---------- LANGUAGE SWITCHER (desktop) ---------- */
.lang-switcher{position:relative;}
.lang-current{
  display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:20px;
  color:var(--gold-light);font-size:11.5px;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.02);
  transition:background .2s,border-color .2s;
}
.lang-current:hover,.lang-switcher.open .lang-current{background:rgba(214,169,67,.1);border-color:var(--gold);}
.lang-current svg{width:12px;height:12px;transition:transform .25s var(--ease);}
.lang-switcher.open .lang-current svg{transform:rotate(180deg);}
.lang-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:150px;z-index:150;
  background:rgba(8,9,13,.98);border:1px solid var(--line-strong);border-radius:2px;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.75);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.lang-switcher.open .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.lang-dropdown a{
  display:block;padding:9px 12px;border-radius:2px;font-size:13px;font-weight:600;color:var(--text-soft);
  transition:background .2s,color .2s;
}
.lang-dropdown a:hover{background:rgba(214,169,67,.1);color:var(--gold-light);}
.lang-dropdown a.active{color:var(--gold-light);background:rgba(214,169,67,.08);}
@media (max-width:1400px){.lang-switcher{display:none;}}

/* ---------- LANGUAGE SWITCHER (mobile menu) ---------- */
.m-lang-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;
  padding-top:18px;border-top:1px solid var(--line);
}
.m-lang-row a{
  padding:7px 14px;border:1px solid var(--line-strong);border-radius:20px;
  font-size:11.5px !important;font-weight:700 !important;letter-spacing:.05em;color:var(--text-soft) !important;
}
.m-lang-row a.active{color:var(--gold-light) !important;background:rgba(214,169,67,.12);border-color:var(--gold);}

.nav-burger{display:none;width:26px;height:20px;position:relative;cursor:pointer;padding:0;}
.nav-burger span{position:absolute;left:0;right:0;height:2px;background:var(--gold-light);transition:transform .3s,opacity .3s;}
.nav-burger span:nth-child(1){top:0;}
.nav-burger span:nth-child(2){top:9px;}
.nav-burger span:nth-child(3){top:18px;}
.nav-burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* mega menu (desktop, >1400px) */
.has-mega{padding-bottom:6px;}
.mega-menu{
  position:fixed;left:0;right:0;top:0;z-index:150;max-height:100vh;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  background:rgba(8,9,13,.98);border-bottom:1px solid var(--line-strong);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  padding:110px clamp(20px,4vw,56px) 40px;
}
.has-mega:hover .mega-menu,.has-mega.mega-open .mega-menu{opacity:1;visibility:visible;transform:translateY(0);}
.mega-inner{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:3px;
  max-height:56vh;overflow-y:auto;
}
.mega-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:2px;
  transition:background .2s;
}
.mega-item:hover{background:rgba(214,169,67,.08);}
.mega-item svg{width:20px;height:20px;color:var(--gold);margin-top:2px;flex-shrink:0;}
.mega-item b{display:block;font-size:13px;font-weight:700;color:#f5f0e4;line-height:1.4;}
.mega-item p{margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--text-mute);}
.mega-item .mega-status{display:inline-block;margin-top:6px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;font-weight:700;}
.status-aktif{background:rgba(80,200,140,.15);color:#7bd6ac;}
.status-demo{background:rgba(214,169,67,.15);color:var(--gold-light);}
.status-yakinda{background:rgba(255,255,255,.08);color:var(--text-mute);}
.mega-viewall{
  max-width:1240px;margin:24px auto 0;display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);
  padding-top:20px;border-top:1px solid var(--line);
}
.mega-viewall svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.mega-viewall:hover svg{transform:translateX(4px);}

/* ---------- MOBILE MENU (<=1400px) ----------
   10 nav links no longer fit next to the logo/phone/login button past this
   width even with the shrink steps above, so the hamburger takes over here
   instead of the old 1050px — this is what keeps 1366px (a required test
   width) overflow-free. */
.mobile-menu{display:none;}
@media (max-width:1400px){
  .vip-links,.vip-contact{display:none;}
  .nav-burger{display:block;}
  .scroll-cue{display:none;}

  .mobile-menu{
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:199;
    background:rgba(6,8,12,.98);
    display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(-100%);transition:transform .45s var(--ease);
    border-top:1px solid var(--line);
  }
  .mobile-menu.open{transform:translateY(0);}
  .m-menu-inner{
    min-height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:18px;
    padding:104px 24px 56px; /* top offset clears the fixed nav bar + logo */
  }
  .mobile-menu a{color:var(--gold-light);font-size:18px;font-weight:600;letter-spacing:.04em;text-align:center;padding:6px 0;}
  .mobile-menu .m-contact{margin-top:6px;color:var(--gold);font-size:14px;letter-spacing:.05em;text-align:center;padding-top:14px;border-top:1px solid var(--line);}

  .m-vip-block{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;}
  .m-vip-toggle{
    width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    color:var(--gold-light);font-size:18px;font-weight:600;letter-spacing:.04em;padding:8px 0;
  }
  .m-vip-chev{width:16px;height:16px;color:var(--gold);transition:transform .3s var(--ease);flex-shrink:0;}
  .m-vip-toggle[aria-expanded="true"] .m-vip-chev{transform:rotate(180deg);}
  .m-vip-panel{
    overflow:hidden;max-height:0;transition:max-height .4s var(--ease);
  }
  .m-vip-panel-inner{display:flex;flex-direction:column;gap:2px;padding:10px 0 4px;}
  .m-vip-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 10px;border-radius:2px;text-align:left;
  }
  .m-vip-row:active{background:rgba(214,169,67,.1);}
  .m-vip-row b{font-size:13.5px;font-weight:600;color:#f0ebdc;letter-spacing:.01em;line-height:1.35;}
  .m-vip-row .mega-status{flex-shrink:0;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px;font-weight:700;}
  .m-vip-viewall{
    display:block;margin-top:6px;padding:12px 10px;text-align:center !important;
    font-size:13px !important;font-weight:700 !important;color:var(--gold) !important;
    border-top:1px solid var(--line);
  }
}
@media (max-width:1400px) and (max-height:700px){
  .m-menu-inner{padding-top:88px;gap:14px;}
  .mobile-menu a{font-size:16.5px;}
  .m-vip-toggle{font-size:16.5px;}
}

/* ======================================================
   CINEMATIC HERO
   ====================================================== */
.cine-stage{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:#000;}

.cine-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;filter:blur(18px) saturate(1.05) brightness(.92);transform:scale(1.12);
  transition:opacity 2s var(--ease),filter 2.3s var(--ease),transform 2.6s var(--ease);will-change:opacity,filter,transform;}
.cine-slide.active{opacity:1;filter:blur(0) saturate(1.05) brightness(1);transform:scale(1);z-index:2;}
.cine-slide.prev{z-index:1;transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease);}
.cine-slide img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;transform-origin:22% 50%;}

.cine-slide[data-kb="zoom-in-left"].active img{animation-name:kbZoomInLeft;}
.cine-slide[data-kb="zoom-in-right"].active img{animation-name:kbZoomInRight;}
.cine-slide[data-kb="zoom-in-center"].active img{animation-name:kbZoomInCenter;}
.cine-slide[data-kb="drift-up"].active img{animation-name:kbDriftUp;}
.cine-slide.active img{animation-duration:9s;animation-timing-function:var(--ease);animation-fill-mode:forwards;}
@keyframes kbZoomInLeft{from{transform:scale(1) translate(0,0);}to{transform:scale(1.15) translate(-2%,1.2%);}}
@keyframes kbZoomInRight{from{transform:scale(1) translate(0,0);}to{transform:scale(1.16) translate(1.5%,-1.2%);}}
@keyframes kbZoomInCenter{from{transform:scale(1) translate(0,0);}to{transform:scale(1.18) translate(-1%,-1.6%);}}
@keyframes kbDriftUp{from{transform:scale(1.04) translate(0,1.2%);}to{transform:scale(1.13) translate(-.5%,-1.6%);}}

.cine-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none;
  background:
    /* broad wash (not a tight spot — precise per-image overlay proved
       unreliable) that softens the baked-in title/CTA text across the
       lower-left of every banner, so it recedes behind the real button */
    linear-gradient(to top,rgba(4,5,8,.35) 0%,rgba(4,5,8,.06) 46%,rgba(4,5,8,0) 60%),
    linear-gradient(to bottom,rgba(4,5,8,.55) 0%,rgba(4,5,8,.15) 30%,rgba(4,5,8,.35) 65%,rgba(4,5,8,.9) 100%),
    linear-gradient(90deg,rgba(4,5,8,.4),rgba(4,5,8,0) 40%,rgba(4,5,8,0) 60%,rgba(4,5,8,.4));
}
.cine-glow{position:absolute;z-index:6;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen;
  transition:transform 1.2s cubic-bezier(.22,.7,.32,1);transform:translate3d(var(--px,0),var(--py,0),0);}
.glow-a{width:38vw;height:38vw;left:-8vw;top:8vh;background:radial-gradient(circle,rgba(255,227,160,.55),transparent 70%);}
.glow-b{width:26vw;height:26vw;right:-6vw;bottom:6vh;background:radial-gradient(circle,rgba(214,169,67,.4),transparent 70%);}

.cine-progress{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px;z-index:20;}
.cine-progress .dot{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;position:relative;cursor:pointer;}
.cine-progress .dot i{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;border-radius:2px;}
.cine-progress .dot.done i{transform:scaleX(1);transition:none;}
.cine-progress .dot.running i{transform:scaleX(0);animation:dotFill linear forwards;}
@keyframes dotFill{to{transform:scaleX(1);}}

.cine-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,227,160,.3);background:rgba(8,9,13,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;color:var(--gold-light);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.cine-arrow:hover{background:rgba(214,169,67,.2);border-color:var(--gold);transform:translateY(-50%) scale(1.08);}
.cine-arrow svg{width:20px;height:20px;}
.cine-prev{left:clamp(10px,3vw,40px);}
.cine-next{right:clamp(10px,3vw,40px);}
@media (max-width:900px){.cine-arrow{width:38px;height:38px;}.cine-arrow svg{width:17px;height:17px;}}
@media (max-width:560px){.cine-arrow{display:none;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.hero-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;}
.hero-panel{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .6s var(--ease);}
.hero-panel.active{opacity:1;pointer-events:auto;}

/* Premium hero caption — title/subtitle/CTA, same markup and same
   design language for every language including Turkish (the banner
   images no longer have any text baked into them; assets/images/
   hero-*-clean.png replaced the originals, see migrations/
   2026_07_10_update_hero_images_clean_versions.sql). No solid "card"
   box — a soft directional scrim (::before) plus a light blur gives
   just enough contrast, since the photo itself is already darkened on
   this side of the frame by design. A thin gold rule under the title
   echoes the divider the original artwork used to have, so the brand
   language stays consistent even though it's real HTML now. */
.hero-caption{
  position:absolute;left:clamp(24px,6vw,90px);right:clamp(24px,6vw,90px);
  bottom:16%;max-width:600px;z-index:3;
}
.hero-caption::before{
  content:'';position:absolute;inset:-28px -32px;z-index:-1;
  background:linear-gradient(120deg,rgba(6,7,10,.48) 0%,rgba(6,7,10,.22) 55%,transparent 88%);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-radius:22px;
}
.hero-caption h1{
  font-family:'Cormorant Garamond',serif;font-weight:700;color:#fdf8ec;
  font-size:clamp(28px,4.2vw,52px);line-height:1.14;margin:0 0 16px;
  letter-spacing:.005em;text-shadow:0 6px 28px rgba(0,0,0,.5);
}
.hero-caption-rule{
  display:block;width:60px;height:2px;margin:0 0 16px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold) 75%,transparent);
  box-shadow:0 0 12px rgba(214,169,67,.65);
}
.hero-caption p{
  font-size:clamp(13.5px,1.5vw,16px);color:var(--gold-light);
  line-height:1.6;margin:0 0 30px;max-width:460px;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.hero-cta{min-height:48px;}
@media (max-width:640px){
  .hero-caption{left:20px;right:20px;bottom:15%;max-width:none;}
  .hero-caption::before{inset:-18px -20px;border-radius:16px;}
  .hero-caption h1{font-size:26px;margin-bottom:10px;}
  .hero-caption-rule{margin-bottom:12px;}
  .hero-caption p{font-size:13px;margin-bottom:22px;}
  .hero-cta{padding:12px 22px;font-size:12px;}
}

/* On narrow phones, capping the stage aspect (rather than forcing 100vh)
   keeps the baked-in title/button from being cropped off the right edge
   by object-fit:cover. The exact height is set inline by main.js
   (syncStageHeight) since not every browser resolves CSS min()/max() the
   same way; min-height here is just a safe fallback. */
@media (max-width:720px){
  .cine-stage{min-height:380px;}
}

/* Mobile-only consultant photo + name badge — desktop is untouched
   (display:none until 640px). A cropped bust shot plus a small
   name/title chip (same card language as .about-badge below) sits
   between the fixed nav and the caption, so the first screen reads as
   personal/trustworthy/corporate instead of an empty dark banner.
   assets/images/boray-hero-mobile.png is a 1086x1448 (3:4) studio
   portrait; object-fit:cover + a top-biased object-position keeps the
   face and shoulders sharp and crops out the lower torso instead of the
   head. The card and badge are sized so their combined height stays
   clear of the caption at every required breakpoint (390/430/344px,
   verified across all 5 hero slides in preview) — no fade/mask trick
   needed, just a fixed hand-off gap. */
.cine-person-wrap{display:none;}
@media (max-width:640px){
  .cine-person-wrap{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    position:absolute;z-index:8;top:clamp(48px,11%,68px);left:50%;transform:translateX(-50%);
  }
  .cine-person{
    position:relative;width:154px;height:138px;border-radius:16px;overflow:hidden;
    box-shadow:0 0 40px 4px rgba(214,169,67,.26),0 18px 34px -14px rgba(0,0,0,.75),0 0 0 1px rgba(214,169,67,.4);
  }
  /* object-fit:cover can't crop both axes at once on this container's
     aspect ratio (it always shows one dimension edge-to-edge, so the
     face ended up small and pushed to one side). Instead the img is
     placed at an explicit oversized width/height + negative offset,
     hand-measured from the source photo's actual pixel coordinates
     (1086x1448) so the visible window is centered on the face —
     roughly source-pixels x:230-650, y:102-478. max-width:none escapes
     the site-wide img{max-width:100%} reset. */
  .cine-person img{
    position:absolute;top:-37px;left:-84px;width:399px;height:531px;max-width:none;display:block;
  }
  .cine-person-badge{
    display:flex;flex-direction:column;align-items:center;
    padding:4px 15px;border-radius:20px;
    background:rgba(8,9,13,.7);border:1px solid rgba(214,169,67,.42);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
    white-space:nowrap;
  }
  .cine-person-badge b{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:12.5px;color:#f8f3e6;line-height:1.2;}
  .cine-person-badge span{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);line-height:1.3;}
}
@media (max-width:380px){
  .cine-person-wrap{top:38px;gap:4px;}
  .cine-person{width:124px;height:111px;}
  .cine-person img{top:-30px;left:-68px;width:321px;height:428px;}
  .cine-person-badge{padding:3px 12px;}
  .cine-person-badge b{font-size:11.5px;}
  .cine-person-badge span{font-size:7.5px;}
}

.scroll-cue{position:absolute;right:28px;bottom:120px;z-index:15;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:riseIn 1s var(--ease) 1.6s forwards;}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(to bottom,var(--gold),transparent);overflow:hidden;position:relative;}
.scroll-cue .line i{position:absolute;top:-46px;left:0;width:1px;height:46px;background:var(--gold-light);animation:scrollDrip 2.2s linear infinite;}
@keyframes scrollDrip{to{top:100%;}}
.scroll-cue span{font-size:10px;letter-spacing:.25em;color:rgba(245,240,228,.6);writing-mode:vertical-rl;}

@media (max-width:640px){
  .cine-stage{height:100svh;}
  .hero-panel{align-self:flex-end;}
  .hero-content{align-items:flex-end;padding-bottom:150px;}
  .stat{flex:1 1 50%;border-bottom:1px solid rgba(255,255,255,.08);}
}

@media (prefers-reduced-motion:reduce){
  .cine-slide,.cine-slide img,.hero-eyebrow,.hero-title,.hero-sub,.hero-ctas,.hero-person,.hero-stats,.scroll-cue{
    animation:none !important;transition:opacity .4s linear !important;transform:none !important;opacity:1 !important;
  }
}

/* ======================================================
   SECTIONS — common
   ====================================================== */
.section{position:relative;padding:110px 0;}
.section-alt{background:linear-gradient(180deg,var(--bg-2),var(--bg-3));}
.section-dark{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.vip-glow{opacity:.25;}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.section-head .lead{margin:0 auto;}
.section-cta{text-align:center;margin-top:48px;}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal[data-reveal="left"]{transform:translateX(-32px);}
.reveal[data-reveal="left"].in-view{transform:translateX(0);}
.reveal[data-reveal="right"]{transform:translateX(32px);}
.reveal[data-reveal="right"].in-view{transform:translateX(0);}

.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:1000px){.grid-3{grid-template-columns:repeat(2,1fr);}.grid-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr;}.grid-6{grid-template-columns:repeat(2,1fr);}}

/* ---------- HAKKIMIZDA ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px;}}
.about-frame{
  position:relative;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  background:
    radial-gradient(ellipse at 50% 14%,rgba(255,227,160,.24),transparent 46%),
    repeating-linear-gradient(135deg,rgba(214,169,67,.05) 0px,rgba(214,169,67,.05) 1px,transparent 1px,transparent 26px),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
}
/* Source photo is a full-body cutout with the face in only the top ~12-15%
   of the frame, so object-position must be pinned hard to the top — a
   generic center/18% crop cuts the head off. This shows head-to-waist. */
.about-frame img{aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.about-badge{
  position:absolute;left:20px;bottom:20px;right:20px;display:flex;align-items:center;gap:12px;
  background:rgba(6,7,10,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:2px;padding:14px 16px;
}
.about-badge img{width:34px;height:34px;object-fit:contain;}
.about-badge b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;color:#f8f3e6;}
.about-badge span{font-size:11px;letter-spacing:.05em;color:var(--gold);}
.about-points{margin:22px 0 30px;display:flex;flex-direction:column;gap:12px;}
.about-points li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-soft);}
.about-points svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:1px;}

.about-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;border-top:1px solid var(--line);padding-top:26px;}
.about-stats .stat{flex:1 1 130px;padding:0 18px 0 0;border-right:1px solid var(--line);}
.about-stats .stat:last-child{border-right:none;}
.about-stats .stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.4vw,28px);color:var(--gold-light);font-weight:700;}
.about-stats .stat span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);}
@media (max-width:520px){.about-stats .stat{flex:1 1 45%;padding:0 0 14px;border-right:none;}}

/* ---------- SİZDEN BİRİ ---------- */
.sizden-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;}
@media (max-width:900px){.sizden-grid{grid-template-columns:1fr;gap:44px;}.sizden-media{order:-1;}}
.sizden-media{display:flex;justify-content:center;}
.sizden-frame{
  position:relative;width:100%;max-width:320px;aspect-ratio:9/16;
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 22%,rgba(255,227,160,.22),transparent 42%),
    repeating-linear-gradient(135deg,rgba(214,169,67,.05) 0px,rgba(214,169,67,.05) 1px,transparent 1px,transparent 26px),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.sizden-frame::after{
  content:'';position:absolute;left:14%;right:14%;bottom:18px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);opacity:.6;
}
/* This source photo is a full-body cutout on a transparent background, so
   object-fit:contain (not cover) is used deliberately — it shows the whole
   figure, head to shoe, with zero risk of cropping the face, letterboxed
   against the gold-lit backdrop above like a spotlighted portrait. */
.sizden-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:14px;box-sizing:border-box;}

/* ---------- CARDS shared ---------- */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 0%,rgba(214,169,67,.08),transparent 60%);opacity:0;transition:opacity .4s;}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);}
.card:hover::before{opacity:1;}
.card-icon{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:22px;background:rgba(214,169,67,.05);}
.card-icon svg{width:24px;height:24px;}
.card h3{font-size:19px;color:#f8f3e6;margin-bottom:10px;font-weight:700;}
.card p{font-size:14px;line-height:1.65;color:var(--text-mute);}

/* ---------- VIP GRID ---------- */
.vip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:1050px){.vip-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.vip-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.vip-grid{grid-template-columns:1fr;}}
.vip-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
  display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.vip-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 24px 48px -22px rgba(0,0,0,.65);}
.vip-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.vip-card .card-icon{width:42px;height:42px;margin-bottom:0;}
.vip-card .card-icon svg{width:20px;height:20px;}
.vip-status{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;font-weight:700;white-space:nowrap;}
.vip-card h4{font-size:14.5px;font-weight:700;color:#f2ede0;line-height:1.35;}
.vip-card p{font-size:12.5px;color:var(--text-mute);line-height:1.55;}
.vip-meta{font-size:11px !important;letter-spacing:.04em;color:var(--text-mute);opacity:.75;margin-top:-4px;}

/* Storefront action stack — up to 4 links (İncele/Demo/İndir/Satın Al)
   can render per card depending on what's configured in the admin panel;
   this replaces the old single hardcoded .property-link so they stack
   cleanly instead of colliding on margin-top. */
.vip-actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:16px;}
.vip-actions .property-link{margin-top:0;}
.vip-card:hover .property-link svg{transform:translateX(4px);}
.property-link.is-buy{color:var(--gold-light);}
.property-link.is-download{color:#f2ede0;}
.property-link.is-muted{color:var(--text-mute);}

/* ---------- PROPERTY CARDS ---------- */
.property-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;}
.property-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);}
.property-media{position:relative;aspect-ratio:4/3;background:
  linear-gradient(160deg,#171a20,#0a0b0e);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.property-media svg{width:56px;height:56px;color:rgba(214,169,67,.35);}
.property-media::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 70% 20%,rgba(214,169,67,.12),transparent 60%);}
.property-tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(6,7,10,.75);border:1px solid var(--line-strong);
  color:var(--gold-light);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:20px;}
.property-body{padding:22px 22px 26px;}
.property-loc{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-mute);margin-bottom:10px;}
.property-loc svg{width:14px;height:14px;color:var(--gold);}
.property-body h3{font-size:18px;color:#f8f3e6;margin-bottom:14px;font-weight:700;}
.property-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;}
.property-size{font-size:13px;color:var(--text-soft);}
.property-price{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--gold-light);}
.property-link{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}
.property-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.property-card:hover .property-link svg{transform:translateX(4px);}

/* ---------- TRUST BLOCKS ---------- */
.trust-block{text-align:center;padding:26px 14px;border:1px solid var(--line);border-radius:var(--radius);transition:transform .3s var(--ease),border-color .3s;}
.trust-block:hover{transform:translateY(-5px);border-color:var(--line-strong);}
.trust-block .card-icon{margin:0 auto 16px;}
.trust-block h4{font-size:14px;font-weight:700;color:#f2ede0;margin-bottom:6px;}
.trust-block p{font-size:11.5px;color:var(--text-mute);line-height:1.5;}

/* ---------- SOCIAL ---------- */
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){.social-grid{grid-template-columns:1fr;gap:40px;}}
.social-points{margin-top:20px;display:flex;flex-direction:column;gap:14px;}
.social-points li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--text-soft);}
.social-points svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;}
.social-showcase{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.showcase-card{
  aspect-ratio:3/4;border-radius:var(--radius);border:1px solid var(--line-strong);
  display:flex;align-items:flex-end;padding:16px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#181b21,#0a0b0e);
}
.showcase-card span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold-light);position:relative;z-index:2;}
.showcase-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 20%,rgba(214,169,67,.18),transparent 65%);}
.showcase-card.sc-photo img{
  position:absolute;top:0;left:0;width:100%;height:100%;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease);
}
.showcase-card.sc-photo:hover img{transform:scale(1.06);}
.showcase-card.sc-photo::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  background:linear-gradient(to top,rgba(5,6,9,.9),rgba(5,6,9,.05) 55%);}
.sc-2,.sc-3{margin-top:26px;}
@media (max-width:520px){.sc-2,.sc-3{margin-top:0;}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px;}}
.contact-card{
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--radius);padding:44px 34px;text-align:center;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
/* A tight circle forces an aggressive zoom on a full-body cutout, which
   risks cropping into the face if the zoom factor is even slightly off.
   A taller portrait-style frame is the safer choice: cover+top alone
   already yields a clean head-to-chest crop with no extra zoom needed. */
.contact-avatar{
  width:128px;height:158px;border-radius:var(--radius);overflow:hidden;margin:0 auto 20px;border:2px solid var(--gold);
  box-shadow:0 0 0 6px rgba(214,169,67,.08),0 20px 40px -18px rgba(0,0,0,.6);
  background:
    radial-gradient(ellipse at 50% 14%,rgba(255,227,160,.28),transparent 48%),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
}
/* A negative Y value pushes the crop window down slightly, adding a
   small breathing-room margin above the head instead of starting exactly
   at the source image's own top edge (which left ~zero headroom). */
.contact-avatar img{width:100%;height:100%;object-fit:cover;object-position:center -8%;}
.contact-card h3{font-size:24px;color:#f8f3e6;margin-bottom:4px;}
.contact-role{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.contact-phone{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold-light);margin-bottom:24px;}
.contact-actions{display:flex;flex-direction:column;gap:12px;}
.contact-actions .btn{justify-content:center;}
.contact-detail-list{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.contact-detail-list div{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--text-soft);}
.contact-detail-list svg{width:18px;height:18px;color:var(--gold);}

/* ---------- BLOG ---------- */
.blog-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2);transition:transform .3s var(--ease),border-color .3s;}
.blog-card:hover{transform:translateY(-5px);border-color:var(--line-strong);}
.blog-media{aspect-ratio:16/9;background:linear-gradient(160deg,#171a20,#0a0b0e);display:flex;align-items:center;justify-content:center;position:relative;}
.blog-media svg{width:34px;height:34px;color:rgba(214,169,67,.35);}
.blog-media::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 70% 30%,rgba(214,169,67,.12),transparent 60%);}
.blog-body{padding:22px;}
.blog-date{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block;}
.blog-body h3{font-size:16.5px;color:#f2ede0;margin-bottom:10px;font-weight:700;line-height:1.4;}
.blog-body p{font-size:13px;color:var(--text-mute);line-height:1.6;}

/* ======================================================
   FOOTER
   ====================================================== */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p{margin-top:12px;font-size:13px;color:var(--text-mute);}
.footer-col h6{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:13.5px;color:var(--text-soft);transition:color .25s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding:22px 0;font-size:12px;color:var(--text-mute);}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:180;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#31d966,#1fa851);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -8px rgba(31,168,81,.6);transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;color:#fff;}

/* ======================================================
   PHP-VERSION ADDITIONS — inner-page hero, filters, detail page
   ====================================================== */
.page-hero{
  padding:150px 0 60px;background:linear-gradient(180deg,var(--bg-2),var(--ink));
  border-bottom:1px solid var(--line);
}
.page-hero .lead{margin-top:14px;}
.page-hero .badge-inline{
  display:inline-block;margin-top:14px;padding:5px 14px;border-radius:20px;
  background:rgba(214,169,67,.15);color:var(--gold-light);font-size:11px;font-weight:700;letter-spacing:.08em;
}

.filter-bar{
  display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
.filter-bar .field{display:flex;flex-direction:column;gap:6px;min-width:140px;}
.filter-bar label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.filter-bar input,.filter-bar select{
  background:var(--bg-3);border:1px solid var(--line);border-radius:2px;padding:10px 12px;color:var(--ink-text,#f5f0e4);font-size:13.5px;font-family:inherit;
}
.filter-bar input{color:#f5f0e4;}
.filter-bar select{color:#f5f0e4;}

/* ---------- PORTFOLIO DETAIL ---------- */
.detail-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:50px;align-items:flex-start;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}
.detail-cover{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:16/9;}
.detail-cover img{width:100%;height:100%;object-fit:cover;}
.detail-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.detail-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
@media (max-width:640px){.detail-gallery{grid-template-columns:repeat(2,1fr);}}
.detail-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
@media (max-width:640px){.detail-specs{grid-template-columns:repeat(2,1fr);}}
.spec-item{background:var(--bg-2);padding:16px 18px;}
.spec-item span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.spec-item b{font-size:14px;color:#f2ede0;}
.detail-description{margin-top:34px;}
.detail-map{margin-top:24px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.detail-map iframe{width:100%;min-height:320px;display:block;}

/* ======================================================
   "DÜNYA VE TÜRKİYE PİYASASI" MODÜLÜ
   Ticker, karşılama, gündüz/gece, piyasa kartları, hava
   durumu, hesaplama araçları. Tamamı admin-girişli veri +
   admin'in kendi eklediği ücretsiz embed'lere dayanır.
   ====================================================== */

/* ---------- premium time-of-day greeting toast (index.php only) ----------
   Large, centered, non-interactive (pointer-events:none) overlay — shown
   at most once per browser tab per greeting bucket (see main.js), auto-
   hides well within 5s. position:fixed + viewport-centered so it never
   depends on which hero slide/photo is active and never collides with the
   bottom-anchored hero title/CTA (.hero-caption) or the top-anchored
   mobile consultant photo (.cine-person-wrap). */
.time-greeting-toast{
  position:fixed;top:30%;left:50%;z-index:120;pointer-events:none;
  transform:translate(-50%,calc(-50% + 14px)) scale(.97);
  text-align:center;opacity:0;max-width:92vw;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
.time-greeting-toast::before{
  content:'';position:absolute;left:50%;top:50%;z-index:-1;
  width:150%;height:230%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(6,7,10,.42),transparent 68%);
  filter:blur(2px);
}
.time-greeting-toast.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
.time-greeting-toast.is-hiding{
  opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.98);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.tgt-text{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(32px,6vw,64px);line-height:1.05;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.tgt-rule{
  display:block;width:0;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-light),var(--gold) 80%,transparent);
  box-shadow:0 0 16px rgba(214,169,67,.7);
  transition:width 1s var(--ease) .15s;
}
.time-greeting-toast.is-visible .tgt-rule{width:120px;}
/* Mobile: the hero has a consultant photo pinned near the top
   (.cine-person-wrap, up to ~68px+178px tall) and the title/CTA pinned
   near the bottom (.hero-caption, bottom:15%) — both hand-measured per
   breakpoint (see their own comments). clamp() keeps the toast in the
   open gap between them across real phone heights (~560–900px) instead
   of a plain "top:X%" which would drift into one or the other. */
@media (max-width:640px){
  .time-greeting-toast{top:clamp(210px,40vh,340px);}
  .tgt-rule{margin-top:12px;}
  .time-greeting-toast.is-visible .tgt-rule{width:80px;}
}

/* ---------- day/night atmosphere overlay (hero only, ::after layer) ----------
   Static gradients, no animation loop — negligible cost on any device.
   Driven by a body.time-* class main.js sets from the visitor's own
   browser clock (no server timezone guessing, no API). Admin can turn
   the whole thing off (admin/market-data.php → Karşılama & Atmosfer
   Efektleri) — main.js then never adds the class and these rules never
   match, so .cine-stage looks exactly as it did before this feature. */
.cine-stage::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);}
body.time-morning .cine-stage::after{
  opacity:1;background:linear-gradient(175deg,rgba(255,214,150,.14),rgba(255,214,150,.02) 45%,transparent);mix-blend-mode:screen;
}
body.time-afternoon .cine-stage::after{
  opacity:1;background:linear-gradient(175deg,rgba(255,244,220,.07),transparent 55%);mix-blend-mode:screen;
}
body.time-evening .cine-stage::after{
  opacity:1;background:
    linear-gradient(180deg,rgba(10,14,30,.16),rgba(24,16,6,.10) 55%,rgba(10,14,30,.30)),
    radial-gradient(circle at 82% 78%,rgba(214,169,67,.12),transparent 55%);
  mix-blend-mode:multiply;
}
body.time-night .cine-stage::after{
  opacity:1;background:linear-gradient(180deg,rgba(8,12,26,.32),rgba(8,12,26,.16));mix-blend-mode:multiply;
}

/* ---------- admin-controlled weather effect (hero only, ::before layer) ----------
   Driven by the first active admin/market-data.php weather_settings row
   (includes/functions.php → primary_weather_effect()). CSS-only — a few
   gradient layers with an animated background-position, no canvas/JS.
   Deliberately subtle (see the intensity + mobile + reduced-motion
   overrides below) — this is atmosphere, not a weather simulator. */
.cine-stage::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;}
body.weather-sunny .cine-stage::before{
  opacity:.85;background:radial-gradient(circle at 76% 16%,rgba(255,214,140,.30),transparent 55%);
  mix-blend-mode:screen;animation:weatherSunnyPulse 7s ease-in-out infinite;
}
body.weather-cloudy .cine-stage::before{
  opacity:.7;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 42%,rgba(255,255,255,.04) 72%);
  background-size:220% 220%;mix-blend-mode:screen;animation:weatherCloudDrift 24s linear infinite;
}
body.weather-rainy .cine-stage::before{
  opacity:.4;background-image:repeating-linear-gradient(114deg,rgba(180,210,255,.14) 0,rgba(180,210,255,.14) 1px,transparent 2px,transparent 11px);
  background-size:auto 160%;mix-blend-mode:screen;animation:weatherRainFall 1s linear infinite;
}
body.weather-snowy .cine-stage::before{
  opacity:.55;background-image:
    radial-gradient(circle,rgba(255,255,255,.6) 0 1.4px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.45) 0 1.1px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.55) 0 1.6px,transparent 2px);
  background-size:180px 180px,240px 240px,300px 300px;
  background-position:10% -10%,55% -10%,85% -10%;
  mix-blend-mode:screen;animation:weatherSnowDrift 16s linear infinite;
}
body.weather-stormy .cine-stage::before{
  opacity:.5;background:linear-gradient(180deg,rgba(10,12,18,.34),rgba(10,12,18,.12) 50%,rgba(10,12,18,.36));
  mix-blend-mode:multiply;animation:weatherStormFlicker 9s ease-in-out infinite;
}
body.weather-windy .cine-stage::before{
  opacity:.35;background-image:repeating-linear-gradient(98deg,rgba(255,255,255,.08) 0 2px,transparent 2px 70px);
  background-size:220% 100%;mix-blend-mode:screen;animation:weatherWindDrift 5.5s linear infinite;
}
body.weather-night .cine-stage::before{
  opacity:.8;background:linear-gradient(180deg,rgba(8,10,22,.30),rgba(8,10,22,.14));mix-blend-mode:multiply;
}
/* admin "low" intensity — same effect, roughly half as prominent */
body.weather-intensity-low .cine-stage::before{opacity:.4;}

@keyframes weatherSunnyPulse{0%,100%{opacity:.6}50%{opacity:.9}}
@keyframes weatherCloudDrift{0%{background-position:0 50%}100%{background-position:100% 50%}}
@keyframes weatherRainFall{from{background-position:0 0}to{background-position:-30px 160px}}
@keyframes weatherSnowDrift{from{background-position:10% -10%,55% -10%,85% -10%}to{background-position:6% 110%,50% 110%,80% 110%}}
@keyframes weatherStormFlicker{0%,91%,100%{opacity:1}93%{opacity:.5}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
@keyframes weatherWindDrift{from{background-position:0 0}to{background-position:-220px 0}}

/* mobile: drop the animation loops, keep just a faint static tint — the
   admin-facing brief for this feature explicitly calls for lower effect
   intensity + no perf cost on phones */
@media (max-width:640px){
  .cine-stage::before{animation:none !important;opacity:.3;}
  body.weather-sunny .cine-stage::before,body.weather-night .cine-stage::before{opacity:.5;}
}

@media (prefers-reduced-motion:reduce){
  .time-greeting-toast{transition:opacity .4s linear !important;transform:translate(-50%,-46%) !important;}
  .time-greeting-toast.is-hiding{transition:opacity .4s linear !important;}
  .tgt-rule{transition:width .4s linear .05s !important;}
  .cine-stage::before,.cine-stage::after{animation:none !important;transition:none !important;}
}

/* ---------- homepage market ticker ---------- */
.market-ticker{
  position:relative;z-index:3;display:flex;align-items:center;gap:16px;
  background:var(--bg-2);border-bottom:1px solid var(--line);padding:10px clamp(16px,4vw,40px);
  overflow:hidden;
}
.market-ticker-label{
  flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-light);padding-right:16px;border-right:1px solid var(--line-strong);white-space:nowrap;
}
.market-ticker-track{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.market-ticker-row{display:flex;width:max-content;gap:34px;animation:tickerScroll 38s linear infinite;}
.market-ticker-item{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;color:var(--text-soft);}
.market-ticker-item b{color:#f2ede0;font-weight:700;}
.mt-value{color:var(--gold-light);font-weight:600;}
.mt-change{font-weight:700;font-size:11px;}
.trend-up{color:#4fd18a;}
.trend-down{color:#e5645a;}
.trend-stable{color:var(--text-mute);}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.market-ticker-row{animation:none;}}
@media (max-width:640px){.market-ticker-label{display:none;}}

/* ---------- piyasalar.php: market cards ---------- */
.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;}
@media (max-width:1050px){.market-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.market-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.market-grid{grid-template-columns:1fr;}}
.market-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:transform .3s var(--ease),border-color .3s;}
.market-card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.market-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px;}
.market-card-top b{font-size:13.5px;color:#f2ede0;font-weight:700;}
.market-badge{font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:20px;white-space:nowrap;background:rgba(255,255,255,.06);color:var(--text-mute);}
.market-badge-turkiye{background:rgba(214,169,67,.15);color:var(--gold-light);}
.market-status-live{background:rgba(79,209,138,.15);color:#4fd18a;}
.market-status-delayed{background:rgba(214,169,67,.15);color:var(--gold-light);}
.market-status-stale{background:rgba(255,255,255,.08);color:var(--text-mute);}
.market-status-manual{background:rgba(255,255,255,.08);color:var(--text-mute);}
.market-status-unavailable{background:rgba(229,100,90,.15);color:#e5645a;}
.market-card-value{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:var(--gold-light);}
.market-unit{font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;color:var(--text-mute);}
.market-card-change{font-size:12.5px;font-weight:700;margin-top:4px;}
.market-card-meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--text-mute);}
.market-source{opacity:.85;}

/* ---------- piyasalar.php: free embed widgets ---------- */
.market-widgets{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.market-widget-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.market-widget-card b{display:block;font-size:14px;color:#f2ede0;margin-bottom:4px;}
.market-widget-card p{font-size:12px;color:var(--text-mute);margin-bottom:12px;}
.market-widget-embed{border-radius:4px;overflow:hidden;min-height:80px;}
.market-widget-embed iframe{width:100%;border:0;display:block;}

/* ---------- piyasalar.php: weather ---------- */
.weather-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px;}
.weather-card{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;background:linear-gradient(145deg,var(--bg-2),var(--bg-3));
}
.weather-city{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.weather-temp{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:700;color:#f8f3e6;line-height:1.1;margin:6px 0;}
.weather-condition{font-size:13px;color:var(--text-soft);}
.weather-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-mute);}
.weather-effect-sunny{background:linear-gradient(145deg,rgba(214,169,67,.16),var(--bg-3));}
.weather-effect-cloudy{background:linear-gradient(145deg,rgba(255,255,255,.06),var(--bg-3));}
.weather-effect-rainy,.weather-effect-stormy{background:linear-gradient(145deg,rgba(80,120,180,.14),var(--bg-3));}
.weather-effect-snowy{background:linear-gradient(145deg,rgba(210,225,240,.12),var(--bg-3));}
.weather-effect-windy{background:linear-gradient(145deg,rgba(120,200,180,.10),var(--bg-3));}
.weather-effect-night{background:linear-gradient(145deg,rgba(30,20,70,.22),var(--bg-3));}

/* ---------- piyasalar.php: calculators ---------- */
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
@media (max-width:1050px){.calc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.calc-grid{grid-template-columns:1fr;}}
.calc-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.calc-card-wide{grid-column:1 / -1;}
.calc-card h3{font-size:16px;color:#f2ede0;margin-bottom:6px;}
.calc-card > p{font-size:12.5px;color:var(--text-mute);margin-bottom:16px;line-height:1.5;}
.calc-form{display:flex;flex-direction:column;gap:12px;}
.calc-form-wide{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;}
@media (max-width:720px){.calc-form-wide{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.calc-form-wide{grid-template-columns:1fr;}}
.calc-form .field{display:flex;flex-direction:column;gap:5px;}
.calc-form label{font-size:11px;letter-spacing:.03em;color:var(--text-mute);}
.calc-form input,.calc-form select{
  background:var(--bg-3);border:1px solid var(--line);border-radius:3px;padding:10px 12px;
  color:#f5f0e4;font-size:13.5px;font-family:inherit;
}
.calc-form input:focus,.calc-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,169,67,.25);}
.calc-form .btn-admin{justify-self:start;}
.calc-result{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
/* [hidden] alone loses to ".calc-result{display:flex}" above (author-origin
   beats the browser's own [hidden]{display:none} regardless of specificity),
   so the pre-calculation result box was showing empty on every calculator —
   this explicit override is what actually keeps it hidden until JS reveals it. */
.calc-result[hidden]{display:none;}
.calc-result-label{font-size:11.5px;color:var(--text-mute);}
.calc-result-value{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--gold-light);}
.calc-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;border-top:1px solid var(--line);padding-top:16px;grid-column:1 / -1;}
@media (max-width:720px){.calc-result-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.calc-result-grid{grid-template-columns:1fr;}}
.calc-result-grid > div{display:flex;flex-direction:column;gap:3px;}
.calc-source-hint{grid-column:1/-1;font-size:11.5px;color:var(--text-mute);background:rgba(214,169,67,.06);border:1px solid var(--line);border-radius:3px;padding:10px 14px;margin-bottom:16px;line-height:1.6;}
.calc-disclaimer{grid-column:1/-1;font-size:10.5px;color:var(--text-mute);opacity:.8;margin-top:8px;line-height:1.6;}
/* Döviz Çevirici — seçilen kurun ne olduğunu gösteren küçük ipucu satırı;
   display:none/block main.js'de doğrudan inline style ile toggle edilir
   (piyasalar.js → initDovizRateSelector), bu yüzden burada display verilmez. */
.calc-rate-hint{font-size:11px;color:var(--gold-light);background:rgba(214,169,67,.08);border:1px solid var(--line);border-radius:3px;padding:7px 12px;margin:-2px 0 0;line-height:1.5;}
.calc-rate-hint:empty{display:none;}
.detail-sidebar{position:sticky;top:110px;}

/* ======================================================
   YATIRIMCI AĞI / MÜTEAHHİTLİK / RÖPORTAJLAR / FAYDALI
   BİLGİLER — reuses .property-card/.property-media/.grid
   from the portfolio module for visual consistency, plus a
   handful of module-specific additions below.
   ====================================================== */
.property-tag.is-special{background:rgba(214,169,67,.22);color:var(--gold-light);border:1px solid var(--gold);}

.io-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;padding-top:14px;border-top:1px solid var(--line);}
.io-meta > div{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;}
.io-meta span{color:var(--text-mute);}
.io-meta b{color:#f2ede0;font-weight:700;text-align:right;}

/* ---------- category filter chips (faydali-bilgiler.php) ---------- */
.info-cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;}
.info-cat-filter a{
  padding:8px 16px;border:1px solid var(--line-strong);border-radius:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--text-soft);
  transition:background .2s,color .2s,border-color .2s;
}
.info-cat-filter a:hover{border-color:var(--gold);color:var(--gold-light);}
.info-cat-filter a.active{background:rgba(214,169,67,.15);border-color:var(--gold);color:var(--gold-light);}

/* ---------- magazine cards (roportajlar.php) ---------- */
.magazine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:1000px){.magazine-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.magazine-grid{grid-template-columns:1fr;}}
.magazine-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.magazine-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);}
.magazine-cover{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#171a20,#0a0b0e);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.magazine-cover img{width:100%;height:100%;object-fit:cover;}
.magazine-cover svg{width:48px;height:48px;color:rgba(214,169,67,.35);}
.magazine-cat{position:absolute;top:14px;left:14px;background:rgba(6,7,10,.75);border:1px solid var(--line-strong);color:var(--gold-light);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:20px;}
.magazine-body{position:relative;padding:36px 22px 26px;}
.magazine-avatar{
  position:absolute;top:-32px;left:22px;width:60px;height:60px;border-radius:50%;object-fit:cover;
  border:3px solid var(--bg-2);box-shadow:0 8px 20px rgba(0,0,0,.5);background:var(--bg-3);
}
.magazine-body h3{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:#f8f3e6;line-height:1.3;margin-bottom:8px;}
.magazine-person{font-size:12px;color:var(--gold);margin-bottom:10px;}
.magazine-excerpt{font-size:12.5px;font-style:italic;color:var(--text-mute);line-height:1.6;margin-bottom:16px;}

/* ---------- full magazine article (in-page, anchored) ---------- */
.magazine-article{max-width:760px;margin:0 auto 64px;padding-bottom:48px;border-bottom:1px solid var(--line);}
.magazine-article:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0;}
.magazine-article-cover{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-bottom:26px;}
.magazine-article-head{display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.magazine-article-head .magazine-avatar{position:static;width:64px;height:64px;border-width:2px;flex-shrink:0;}
.magazine-article-content{font-size:15px;line-height:1.9;color:var(--text-soft);margin-bottom:20px;}
.magazine-company-logo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:4px;padding:4px;margin-left:auto;flex-shrink:0;}

/* ---------- small logo/icon badges over a card's photo ---------- */
.developer-logo-badge,.info-icon-badge{
  position:absolute;bottom:12px;right:12px;z-index:2;width:44px;height:44px;object-fit:contain;
  background:rgba(8,9,13,.85);border:1px solid var(--line-strong);border-radius:6px;padding:5px;
}

/* ---------- pazarlama kampanyası duyuru şeridi ---------- */
.campaign-bar{
  background:linear-gradient(90deg,#171a20,#0a0b0e);border-bottom:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 44px 9px 16px;
  position:fixed;top:0;left:0;right:0;z-index:210;
  font-size:12.5px;color:#f2ede0;text-align:center;
}
.campaign-bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;}
.campaign-bar-inner a{color:var(--gold-light);font-weight:700;text-decoration:underline;white-space:nowrap;}
.campaign-bar-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--text-mute);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;
}
.campaign-bar-close:hover{color:#f2ede0;}
@media (max-width:640px){.campaign-bar{font-size:11.5px;padding:8px 38px 8px 12px;}}

/* ---------- referanslar / iş ortakları logo grid ---------- */
.reference-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1000px){.reference-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.reference-grid{grid-template-columns:repeat(2,1fr);}}
.reference-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.reference-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 24px 48px -22px rgba(0,0,0,.65);}
.reference-logo{width:100%;height:72px;display:flex;align-items:center;justify-content:center;}
.reference-logo img{max-width:100%;max-height:72px;object-fit:contain;background:#fff;border-radius:6px;padding:6px;}
.reference-name{font-size:13.5px;font-weight:700;color:#f2ede0;line-height:1.3;}
.reference-sector{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;}
.reference-relation{font-size:10px;color:var(--text-mute);}
.reference-demo-tag{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-light);
  background:rgba(214,169,67,.15);border:1px solid var(--line-strong);border-radius:20px;padding:3px 10px;}
.reference-card a.reference-link{color:inherit;text-decoration:none;}

/* ---------- homepage teaser mini-cards (image + title + text) ---------- */
.mini-card{
  display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.mini-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 24px 48px -22px rgba(0,0,0,.65);}
.mini-card-media{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#171a20,#0a0b0e);}
.mini-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.mini-card-body{padding:20px 20px 24px;}
.mini-card-body h3{font-size:15px;font-weight:700;color:#f2ede0;line-height:1.35;margin-bottom:8px;}
.mini-card-body p{font-size:12.5px;color:var(--text-mute);line-height:1.55;}