﻿/* ============================================================
   EKSA Gayrimenkul — Ana Stil Dosyası
   Palet: lacivert (logodan) + şampanya altını
   ============================================================ */

/* ─── Değişkenler ─────────────────────────────────────────── */
:root{
  --navy:        #16233F;
  --navy-deep:   #0B1220;
  --navy-soft:   #223458;
  --gold:        #C2A661;
  --gold-light:  #DFC98F;
  --gold-dark:   #9C8340;

  --ink:         #171A20;
  --body:        #545B68;
  --muted:       #8A919E;
  --line:        #E4E7EC;
  --line-soft:   #F0F2F5;
  --paper:       #FFFFFF;
  --cream:       #FAF9F6;
  --smoke:       #F5F6F8;

  --ok:          #147A4B;
  --warn:        #B4802A;
  --bad:         #B3261E;

  --shadow-sm:   0 1px 3px rgba(16,26,48,.06), 0 1px 2px rgba(16,26,48,.04);
  --shadow:      0 4px 20px rgba(16,26,48,.08);
  --shadow-lg:   0 18px 50px rgba(16,26,48,.13);
  --shadow-gold: 0 10px 34px rgba(194,166,97,.28);

  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-xl: 24px;

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 84px;
}

/* ─── Sıfırlama ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.7;
  color:var(--body); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }

/* Görseller DOM'a eklenirken yumuşak belirir — @starting-style desteklemeyen
   tarayıcılarda kural tamamen atlanır, görsel normal opacity:1 ile açılır.
   JS'e bağımlı değil: bir olay kaçırılırsa görsel görünmez kalma riski yok. */
img[loading="lazy"]{ transition:opacity .5s var(--ease); }
@supports (transition-behavior: allow-discrete){
  @starting-style{ img[loading="lazy"]{ opacity:0; } }
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:600; line-height:1.18; color:var(--ink); letter-spacing:-.02em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--gold); color:#fff; }

/* Klavyeyle gezinen ziyaretçi için görünür, markaya uygun odak halkası */
:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ─── Tipografi ölçeği ────────────────────────────────────── */
.display{ font-family:var(--serif); font-weight:500; letter-spacing:-.025em; line-height:1.08; }
.h1{ font-size:clamp(2.4rem,5.2vw,4.3rem); }
.h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.h3{ font-size:clamp(1.3rem,2.1vw,1.75rem); }
.lead{ font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.72; color:var(--body); }
.small{ font-size:.875rem; }
.tiny{ font-size:.78rem; }

/* ─── Düzen ───────────────────────────────────────────────── */
.container{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:clamp(20px,4vw,44px); }
.container--narrow{ max-width:940px; }
.section{ padding:clamp(64px,8.5vw,124px) 0; }
.section--cream{ background:var(--cream); }
.section--smoke{ background:var(--smoke); }
.section--navy{ background:var(--navy); color:rgba(255,255,255,.76); }
.section--navy h1,.section--navy h2,.section--navy h3{ color:#fff; }

.grid{ display:grid; gap:clamp(20px,2.6vw,34px); }
/* min() olmadan sabit alt sınır dar ekranda taşmaya yol açar:
   320px'lik sütun + kenar boşluğu 320px'lik telefona sığmaz. */
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.wrap{ flex-wrap:wrap; }
.gap-sm{ gap:10px; } .gap{ gap:18px; } .gap-lg{ gap:32px; }
.text-center{ text-align:center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px}.mb-4{margin-bottom:40px}

/* ─── Bölüm başlığı ───────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.73rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:16px;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--gold); }
.section--navy .eyebrow{ color:var(--gold-light); }
.section-head{ max-width:660px; margin-bottom:clamp(36px,4.5vw,60px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow::before{ display:none; }
.section-head p{ margin-top:16px; }

/* ─── Düğmeler ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px; border-radius:var(--r); font-size:.93rem; font-weight:600;
  letter-spacing:.01em; border:1px solid transparent; position:relative;
  transition:all .35s var(--ease); white-space:nowrap;
}
.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:var(--navy-deep); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ background:var(--gold-dark); transform:translateY(-2px); box-shadow:var(--shadow-gold); }

/* İnce ışık parıltısı — lüks marka dilinde tanıdık, ölçülü bir dokunuş */
.btn--primary,.btn--gold{ overflow:hidden; }
.btn--primary::before,.btn--gold::before{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease);
  pointer-events:none;   /* üstte durur ama tıklamayı engellemez */
}
.btn--primary:hover::before,.btn--gold:hover::before{ left:130%; }
@media (prefers-reduced-motion:reduce){
  .btn--primary::before,.btn--gold::before{ display:none; }
}
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--navy); background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn--light{ border-color:rgba(255,255,255,.28); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 20px; font-size:.85rem; }
.btn--lg{ padding:17px 40px; font-size:1rem; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* Alt çizgili metin bağlantısı */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem;
  color:var(--navy); padding-bottom:3px; border-bottom:1px solid var(--gold);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ gap:14px; color:var(--gold-dark); }

/* ─── Üst menü ────────────────────────────────────────────── */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease),
             height .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.header--transparent{ background:linear-gradient(to bottom,rgba(11,18,32,.62),transparent); }
.header--solid,
.header.is-stuck{
  background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(16,26,48,.05); height:72px;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; }

.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo img{ height:42px; width:auto; transition:height .4s var(--ease); }
.header.is-stuck .logo img{ height:36px; }

/* Logo, menünün zeminine göre beyaz ↔ lacivert değişir */
.logo__img--dark{ display:none; }
.header--solid .logo__img--light,
.header.is-stuck .logo__img--light{ display:none; }
.header--solid .logo__img--dark,
.header.is-stuck .logo__img--dark{ display:block; }
.logo__text{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--serif); font-size:1.42rem; font-weight:600; letter-spacing:.03em; color:#fff; transition:color .4s var(--ease); }
.logo__tag{ font-size:.56rem; letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:4px; transition:color .4s var(--ease); }
.header--solid .logo__name,.header.is-stuck .logo__name{ color:var(--navy); }
.header--solid .logo__tag,.header.is-stuck .logo__tag{ color:var(--muted); }

.nav{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; padding:10px 16px; font-size:.9rem; font-weight:500;
  color:rgba(255,255,255,.88); border-radius:var(--r-sm); transition:color .3s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:16px; right:16px; bottom:4px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.header--solid .nav__link,.header.is-stuck .nav__link{ color:var(--body); }
.header--solid .nav__link:hover,.header.is-stuck .nav__link:hover,
.header--solid .nav__link.is-active,.header.is-stuck .nav__link.is-active{ color:var(--navy); }

.header__actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header__phone{
  display:flex; align-items:center; gap:9px; font-weight:600; font-size:.9rem;
  color:#fff; padding:9px 16px; border-radius:var(--r); border:1px solid rgba(255,255,255,.22);
  transition:all .3s var(--ease);
}
.header__phone:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.header--solid .header__phone,.header.is-stuck .header__phone{ color:var(--navy); border-color:var(--line); }
.header--solid .header__phone:hover,.header.is-stuck .header__phone:hover{ background:var(--navy); color:#fff; }

/* ─── Hesap / danışman girişi açılır menüsü ─────────────── */
.account{ position:relative; flex-shrink:0; }
.account__toggle{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); color:#fff; transition:all .3s var(--ease);
}
.account__toggle:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.header--solid .account__toggle,
.header.is-stuck .account__toggle{ border-color:var(--line); color:var(--body); }
.header--solid .account__toggle:hover,
.header.is-stuck .account__toggle:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.account__toggle[aria-expanded="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }

.account__menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:224px; z-index:120;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:7px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.account.is-open .account__menu{ opacity:1; visibility:visible; transform:none; }
.account__head{
  padding:11px 13px 12px; margin-bottom:5px; border-bottom:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:2px;
}
.account__head strong{ font-size:.9rem; color:var(--ink); font-weight:600; }
.account__head span{ font-size:.74rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.account__item{
  display:block; padding:10px 13px; border-radius:var(--r-sm);
  font-size:.89rem; font-weight:500; color:var(--ink); transition:background .2s var(--ease);
}
.account__item:hover{ background:var(--cream); color:var(--navy); }
.account__item--quiet{ color:var(--muted); }
.account__item--quiet:hover{ color:var(--bad); }

.burger{ display:none; flex-direction:column; gap:5px; padding:10px; margin-right:-10px; }
.burger span{ display:block; width:23px; height:2px; background:#fff; border-radius:2px; transition:all .35s var(--ease); }
.header--solid .burger span,.header.is-stuck .burger span{ background:var(--navy); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobil menü */
.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--navy-deep);
  display:flex; flex-direction:column; justify-content:center; padding:100px 32px 40px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; }
.mobile-nav a{
  font-family:var(--serif); font-size:1.9rem; color:#fff; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0; transform:translateY(16px); transition:all .5s var(--ease);
}
.mobile-nav.is-open a{ opacity:1; transform:none; }
.mobile-nav.is-open a:nth-child(1){transition-delay:.08s}
.mobile-nav.is-open a:nth-child(2){transition-delay:.13s}
.mobile-nav.is-open a:nth-child(3){transition-delay:.18s}
.mobile-nav.is-open a:nth-child(4){transition-delay:.23s}
.mobile-nav.is-open a:nth-child(5){transition-delay:.28s}
.mobile-nav.is-open a:nth-child(6){transition-delay:.33s}
.mobile-nav a.is-active{ color:var(--gold-light); }

/* Danışman girişi — menünün son maddesi, altın vurgulu */
.mobile-nav__login{
  display:flex !important; align-items:center; gap:12px;
  font-family:var(--sans) !important; font-size:1.02rem !important;
  font-weight:600; letter-spacing:.02em;
  color:var(--gold-light) !important;
  border-bottom:0 !important; margin-top:18px;
  padding:15px 18px !important;
  background:rgba(194,166,97,.10);
  border:1px solid rgba(194,166,97,.28) !important;
  border-radius:var(--r);
}
.mobile-nav__login svg{ flex-shrink:0; opacity:.9; }

.mobile-nav__foot{ margin-top:32px; display:flex; flex-direction:column; gap:12px; }
/* Alt düğmeler menü bağlantılarından serif fontu miras almasın */
.mobile-nav__foot .btn{
  font-family:var(--sans); font-size:.95rem; padding:14px 24px;
  border-bottom:0; opacity:1; transform:none;
}

/* ─── Kahraman alan ───────────────────────────────────────── */
.hero{
  position:relative; min-height:min(100svh,880px); display:flex; align-items:center;
  overflow:hidden; background:var(--navy-deep); padding-top:var(--nav-h);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.5;
  animation:kenburns 26s ease-in-out infinite alternate; }

/* Fotoğraf yerine topografik eğri animasyonu.
   Zemin CSS'te, çizgiler canvas'ta — script yüklenmese bile
   kahraman alan dolu ve okunur kalır. */
.hero__canvas{
  width:100%; height:100%; display:block;
  background:
    radial-gradient(ellipse 120% 80% at 28% 42%, rgba(46,68,112,.85), transparent 62%),
    linear-gradient(168deg, #1B2C4E 0%, #131F38 46%, #0A1120 100%);
}
@keyframes kenburns{ from{transform:scale(1) translate(0,0)} to{transform:scale(1.11) translate(-1.4%,-1.4%)} }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(11,18,32,.93) 0%,rgba(11,18,32,.7) 42%,rgba(11,18,32,.42) 100%);
}
/* Animasyonlu zemin zaten koyu — metnin arkasını koru, sağ tarafı
   açık bırak ki eğriler görünsün. */
.hero__media--canvas::after{
  background:linear-gradient(103deg,rgba(10,17,32,.86) 0%,rgba(10,17,32,.58) 40%,rgba(10,17,32,.10) 78%,rgba(10,17,32,0) 100%);
}
/* Aurora katmanı: yavaş akan altın/lacivert ışık kümeleri.
   Eşyükselti çizgilerinin ARKASINDA durur, derinlik verir. */
.hero__aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero__aurora::before,
.hero__aurora::after{
  content:''; position:absolute; border-radius:50%; filter:blur(80px);
}
.hero__aurora::before{
  width:62vw; height:62vw; max-width:820px; max-height:820px;
  top:-14%; right:-10%;
  background:radial-gradient(circle, rgba(194,166,97,.30), transparent 68%);
  animation:auroraA 15s ease-in-out infinite alternate;
}
.hero__aurora::after{
  width:54vw; height:54vw; max-width:700px; max-height:700px;
  bottom:-20%; left:-8%;
  background:radial-gradient(circle, rgba(58,92,155,.42), transparent 70%);
  animation:auroraB 19s ease-in-out infinite alternate;
}
@keyframes auroraA{
  from{ transform:translate(0,0) scale(1); opacity:.75; }
  to  { transform:translate(-7%, 9%) scale(1.16); opacity:1; }
}
@keyframes auroraB{
  from{ transform:translate(0,0) scale(1.08); opacity:.6; }
  to  { transform:translate(9%, -8%) scale(1); opacity:.95; }
}

.hero__inner{ position:relative; z-index:2; width:100%; padding-block:60px; }

/* ─── Giriş sekansı: hero öğeleri sırayla belirir ─────────── */
.js .hero__content > *{
  opacity:0; transform:translateY(16px);
  animation:heroIn .62s cubic-bezier(.22,.61,.36,1) forwards;
}
.js .hero__content > *:nth-child(1){ animation-delay:.05s }
.js .hero__content > *:nth-child(2){ animation-delay:.12s }
.js .hero__content > *:nth-child(3){ animation-delay:.19s }
.js .hero__content > *:nth-child(4){ animation-delay:.26s }
.js .hero__content > *:nth-child(5){ animation-delay:.33s }
@media (prefers-reduced-motion:reduce){
  .js .hero__content > *{ opacity:1; transform:none; animation:none; }
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.hero__content{ max-width:750px; }
.hero .eyebrow{ color:var(--gold-light); }
.hero h1{ color:#fff; margin-bottom:22px; }
.hero p{ color:rgba(255,255,255,.8); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:560px; margin-bottom:36px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:rgba(255,255,255,.5); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scroll::after{
  content:''; width:1px; height:44px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scrollpulse 2.1s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{opacity:.25;transform:scaleY(.55)} 50%{opacity:1;transform:scaleY(1)} }

/* ─── Arama kutusu ────────────────────────────────────────── */
.searchbar{
  position:relative; z-index:5; margin-top:-56px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px;
  border:1px solid rgba(255,255,255,.6);
}
.searchbar__tabs{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.searchbar__tab{
  padding:10px 22px; font-size:.9rem; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .3s var(--ease);
}
.searchbar__tab:hover{ color:var(--navy); }
.searchbar__tab.is-active{ color:var(--navy); border-bottom-color:var(--gold); }
.searchbar__form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)) auto; gap:14px; align-items:end; }

/* ─── Form alanları ───────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field__label{
  font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.field__hint{ font-size:.78rem; color:var(--muted); }
.input,.select,.textarea{
  width:100%; padding:12px 15px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font-size:.94rem; color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(22,35,63,.09);
}
.input::placeholder,.textarea::placeholder{ color:#B4BAC4; }
.textarea{ min-height:130px; resize:vertical; line-height:1.65; }
.select{
  appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238A919E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.input--invalid{ border-color:var(--bad); }
.checkline{ display:flex; align-items:center; gap:9px; font-size:.9rem; cursor:pointer; color:var(--ink); }
.checkline input{ width:17px; height:17px; accent-color:var(--navy); cursor:pointer; flex-shrink:0; }

/* ─── İlan kartı ──────────────────────────────────────────── */
.card{
  position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); display:flex; flex-direction:column; height:100%;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--smoke); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top,rgba(11,18,32,.6),transparent); opacity:0;
  transition:opacity .45s var(--ease);
}
.card:hover .card__media::after{ opacity:1; }

.card__badges{ position:absolute; top:14px; left:14px; display:flex; gap:7px; flex-wrap:wrap; z-index:2; }
.badge{
  padding:6px 13px; border-radius:100px; font-size:.7rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; backdrop-filter:blur(8px);
}
.badge--navy{ background:rgba(22,35,63,.9); color:#fff; }
.badge--gold{ background:var(--gold); color:#fff; }
.badge--white{ background:rgba(255,255,255,.93); color:var(--navy); }
.badge--sold{ background:rgba(179,38,30,.92); color:#fff; }
.badge--ok{ background:rgba(20,122,75,.92); color:#fff; }
.badge--muted{ background:var(--smoke); color:var(--muted); }

.card__count{
  position:absolute; bottom:14px; right:14px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px;
  background:rgba(11,18,32,.62); backdrop-filter:blur(6px); color:#fff; font-size:.75rem; font-weight:600;
}
.card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card__loc{
  display:flex; align-items:center; gap:6px; font-size:.79rem; color:var(--muted);
  margin-bottom:9px; text-transform:uppercase; letter-spacing:.06em; font-weight:500;
}
.card__title{
  font-size:1.06rem; font-weight:600; color:var(--ink); line-height:1.42; margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .3s var(--ease);
}
.card:hover .card__title{ color:var(--navy); }
.card__specs{
  display:flex; gap:16px; flex-wrap:wrap; padding:13px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin-bottom:15px;
}
.card__spec{ display:flex; align-items:center; gap:6px; font-size:.83rem; color:var(--body); font-weight:500; }
.card__spec svg{ color:var(--gold-dark); flex-shrink:0; }
.card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:auto; }
.card__price{ font-family:var(--serif); font-size:1.42rem; font-weight:600; color:var(--navy); line-height:1.1; }
.card__price small{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--muted); margin-top:3px; letter-spacing:.04em; }
.card__agent{ display:flex; align-items:center; gap:8px; }
.card__agent img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1.5px solid var(--line); }
.card__agent span{ font-size:.76rem; color:var(--muted); max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card__link{ position:absolute; inset:0; z-index:3; }

/* Yatay kart (liste görünümü) */
.card--row{ flex-direction:row; }
.card--row .card__media{ width:300px; flex-shrink:0; aspect-ratio:auto; }
.card--row .card__body{ padding:24px 26px; }
@media (max-width:720px){
  .card--row{ flex-direction:column; }
  .card--row .card__media{ width:100%; aspect-ratio:4/3; }
}

/* ─── Danışman kartı ──────────────────────────────────────── */
.agent{
  position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); text-align:center;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.agent:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.agent__media{ position:relative; aspect-ratio:3/3.4; overflow:hidden; background:var(--smoke); }
.agent__media img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .8s var(--ease); filter:grayscale(.18); }
.agent:hover .agent__media img{ transform:scale(1.06); filter:grayscale(0); }
.agent__overlay{
  position:absolute; inset:auto 0 0 0; padding:22px 16px 18px;
  background:linear-gradient(to top,rgba(11,18,32,.9),transparent);
  display:flex; justify-content:center; gap:9px;
  opacity:0; transform:translateY(12px); transition:all .45s var(--ease);
}
.agent:hover .agent__overlay{ opacity:1; transform:none; }
.agent__icon{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px);
  transition:all .3s var(--ease);
}
.agent__icon:hover{ background:var(--gold); transform:translateY(-3px); }
.agent__body{ padding:20px 18px 24px; }
.agent__name{ font-family:var(--serif); font-size:1.22rem; font-weight:600; color:var(--ink); margin-bottom:5px; }
.agent__title{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); font-weight:600; }
.agent__meta{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft); font-size:.84rem; color:var(--muted); }

/* Avatar yer tutucu (fotoğraf yoksa baş harfler) */
.avatar-fallback{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--navy),var(--navy-soft));
  color:var(--gold-light); font-family:var(--serif); font-size:2.6rem; font-weight:500; letter-spacing:.04em;
}

/* ─── İstatistik ──────────────────────────────────────────── */
.stat{ text-align:center; padding:26px 16px; }
.stat__num{ font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:600; color:var(--gold); line-height:1; margin-bottom:10px; }
.stat__label{ font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:500; }
.section--cream .stat__num{ color:var(--navy); }
.section--cream .stat__label{ color:var(--muted); }

/* ─── Hizmet kartı ────────────────────────────────────────── */
.service{
  position:relative; padding:36px 32px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; height:100%;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.service::before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease);
}
.service:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service:hover::before{ transform:scaleY(1); }
.service__icon{
  width:52px; height:52px; border-radius:var(--r); display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(194,166,97,.16),rgba(194,166,97,.05));
  color:var(--gold-dark); margin-bottom:20px;
}
.service h3{ font-size:1.16rem; margin-bottom:11px; }
.service p{ font-size:.94rem; }

/* ─── İlan detay ──────────────────────────────────────────── */
.detail-hero{ position:relative; background:var(--navy-deep); padding-top:var(--nav-h); }
.gallery{ display:grid; grid-template-columns:2fr 1fr; gap:8px; height:min(64vh,560px); }
.gallery__main,.gallery__side{ position:relative; overflow:hidden; background:var(--smoke); cursor:zoom-in; }
.gallery__main img,.gallery__side img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery__main:hover img,.gallery__side:hover img{ transform:scale(1.04); }
.gallery__side-wrap{ display:grid; grid-template-rows:1fr 1fr; gap:8px; }
.gallery__more{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(11,18,32,.62); color:#fff; font-weight:600; font-size:1.05rem; backdrop-filter:blur(2px);
}
@media (max-width:820px){ .gallery{ grid-template-columns:1fr; height:auto; }
  .gallery__main{ aspect-ratio:4/3; } .gallery__side-wrap{ grid-template-rows:none; grid-template-columns:1fr 1fr; } }

.detail-grid{ display:grid; grid-template-columns:1fr 372px; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:1000px){ .detail-grid{ grid-template-columns:1fr; } }

.price-tag{ font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; color:var(--navy); line-height:1; }
.spec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.spec{ background:#fff; padding:16px 18px; }
.spec__label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:600; }
.spec__value{ font-size:.97rem; font-weight:600; color:var(--ink); }

.feature-group{ margin-bottom:26px; }
.feature-group h4{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:13px; font-weight:700; }
.feature-list{ display:flex; flex-wrap:wrap; gap:8px; }
.feature-pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  background:var(--cream); border:1px solid var(--line); border-radius:100px;
  font-size:.84rem; color:var(--ink); font-weight:500;
}
.feature-pill svg{ color:var(--ok); flex-shrink:0; }

/* Yapışkan iletişim kutusu */
.sticky-box{ position:sticky; top:calc(var(--nav-h) + 18px); }
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow);
}
.contact-card__agent{ display:flex; align-items:center; gap:15px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line-soft); }
.contact-card__agent img{ width:62px; height:62px; border-radius:50%; object-fit:cover; }
.contact-card__agent .avatar-fallback{ width:62px; height:62px; border-radius:50%; font-size:1.3rem; }

/* ─── Filtre paneli ───────────────────────────────────────── */
.filters{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.filters__group{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line-soft); }
.filters__group:last-of-type{ border-bottom:0; margin-bottom:0; }
.filters__title{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:14px; }
.range-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; }
.range-row span{ color:var(--muted); font-size:.85rem; }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:15px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:26px;
}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
  background:var(--cream); border:1px solid var(--line); border-radius:100px; font-size:.82rem; color:var(--ink);
}
.chip button{ color:var(--muted); display:grid; place-items:center; }
.chip button:hover{ color:var(--bad); }

/* ─── Hero: EKSA markası + açılımı ────────────────────────── */
.hero__brand{
  font-size:clamp(3.4rem,10vw,6.4rem); line-height:.95; margin-bottom:14px;
  background:linear-gradient(100deg,#8f7333 0%,#e9d9a8 22%,#c2a661 45%,#f3e6bc 62%,#9c8340 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  /* .hero h1{color:#fff} daha özgül bir kuraldan geldiği için salt "color"
     yetmiyor — -webkit-text-fill-color ayrı bir kanal, o kuralı ezmeden
     metni saydam bırakır. */
  color:transparent; -webkit-text-fill-color:transparent;
}
/* .js .hero__content > * (2 sınıf) zaten "animation" özelliğini kullanıyor;
   tek sınıflı .hero__brand aynı özgüllükte OLMADIĞI için o kural tarafından
   eziliyordu. İki sınıflı bir seçiciyle her iki animasyonu birlikte
   tanımlayarak hem giriş efektini hem parıltıyı koruyoruz. */
.js .hero__brand{
  animation: heroIn .62s cubic-bezier(.22,.61,.36,1) forwards, brandShine 5s linear infinite;
  animation-delay: .12s, 0s;
}
@keyframes brandShine{
  0%{ background-position:0% 50%; }
  100%{ background-position:220% 50%; }
}
.hero__acronym{
  font-size:clamp(1rem,1.8vw,1.3rem); letter-spacing:.04em; font-weight:500;
  color:rgba(255,255,255,.72); margin:0 0 26px;
}
.hero__acronym span{
  color:var(--gold-light); font-weight:700; font-size:1.15em;
}
@media (prefers-reduced-motion:reduce){
  .js .hero__brand{ animation:none; opacity:1; transform:none; background-position:35% 50%; }
}

/* ─── Kurucu Başkan mesajı (ortalanmış kompozisyon) ───────── */
.founder{
  position:relative; text-align:center;
  max-width:840px; margin-inline:auto;
}

/* Arkadaki ışık kümesi */
.founder::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-40px; left:50%; transform:translateX(-50%);
  width:min(560px,90vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(194,166,97,.20), transparent 66%);
  filter:blur(46px);
  animation:founderBloom 9s ease-in-out infinite alternate;
}
@keyframes founderBloom{
  from{ opacity:.55; transform:translateX(-50%) scale(.94); }
  to  { opacity:1;   transform:translateX(-50%) scale(1.08); }
}

/* Portre çerçevesi — dönen altın halka */
.founder__frame{
  position:relative; z-index:1;
  width:min(340px,78vw); margin:0 auto 40px;
  padding:4px; border-radius:calc(var(--r-lg) + 4px);
  /* Dönen kare çerçevenin dışına taşmasın diye kırpılır */
  overflow:hidden; isolation:isolate;
}
/* Dönen altın konik degrade — kırpıldığı için ince bir çerçeve olarak görünür */
.founder__frame::before{
  content:''; position:absolute; z-index:-2;
  top:50%; left:50%; width:180%; aspect-ratio:1;
  background:conic-gradient(from 0deg,
    var(--gold) 0deg, rgba(194,166,97,.05) 80deg,
    var(--gold-light) 160deg, rgba(194,166,97,.05) 250deg,
    var(--gold) 360deg);
  animation:founderRing 9s linear infinite;
}
/* İç yüzey — ortayı kapatır, geriye yalnızca çerçeve kalır */
.founder__frame::after{
  content:''; position:absolute; inset:4px; z-index:-1;
  border-radius:var(--r-lg); background:var(--cream);
}
@keyframes founderRing{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}

.founder__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--navy); box-shadow:var(--shadow-lg);
  animation:founderFloat 7s ease-in-out infinite;
  transition:transform .35s var(--ease);
  transform-style:preserve-3d;
}
@keyframes founderFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}
.founder__media img{ width:100%; height:auto; display:block; }

.founder__body{ position:relative; z-index:1; }

.founder__lead{
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.48; color:var(--ink); font-weight:500;
  margin:0 auto 30px; max-width:34ch;
}
.founder__body p{
  margin:0 auto 1.15em; max-width:66ch; text-align:left;
}

/* Alıntı — üstte ve altta altın kural, ortalanmış */
.founder__pull{
  position:relative; margin:38px auto; padding:30px 26px; max-width:62ch;
  font-family:var(--serif); font-size:clamp(1.12rem,1.8vw,1.35rem);
  line-height:1.55; color:var(--navy); font-weight:500; text-align:center;
}
.founder__pull::before,
.founder__pull::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:70px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.founder__pull::before{ top:0; }
.founder__pull::after{ bottom:0; }

.founder__sign{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:40px; padding-top:28px;
}
.founder__sign::before{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  margin-top:-28px; width:120px; height:1px; background:var(--line);
}
.founder__sign-name{
  font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink);
}
.founder__sign-role{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:600; margin-top:4px;
}
.founder__sign-mark{ width:44px; height:1px; background:var(--gold); flex-shrink:0; }

/* Kapsama alanı rozetleri */
.reach{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; justify-content:center; }
.reach span{
  padding:8px 17px; border-radius:100px; background:#fff;
  border:1px solid var(--line); font-size:.83rem; color:var(--body); font-weight:500;
  transition:all .3s var(--ease);
}
.reach span:hover{ border-color:var(--gold); color:var(--navy); transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){
  .founder::before,
  .founder__frame::before,
  .founder__media{ animation:none; }
}

/* ─── Okuma ilerleme çizgisi ──────────────────────────────── */
.progress-bar{
  position:fixed; top:0; left:0; height:2px; z-index:200;
  width:0; background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  transition:width .1s linear; pointer-events:none;
}

/* ─── Kurumsal güven şeridi ───────────────────────────────── */
.trustbar{
  border-block:1px solid var(--line); background:var(--paper);
}
.trustbar__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.trustbar__item{
  display:flex; align-items:flex-start; gap:14px;
  padding:26px clamp(16px,2.4vw,30px);
  border-right:1px solid var(--line-soft);
}
.trustbar__item:last-child{ border-right:0; }
.trustbar__icon{
  width:38px; height:38px; border-radius:var(--r-sm); flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(194,166,97,.16),rgba(194,166,97,.05));
  color:var(--gold-dark);
}
.trustbar__title{ font-size:.93rem; font-weight:600; color:var(--ink); margin-bottom:3px; }
.trustbar__text{ font-size:.82rem; color:var(--muted); line-height:1.55; }
@media (max-width:720px){ .trustbar__item{ border-right:0; border-bottom:1px solid var(--line-soft); } }

/* ─── Referans / görüş kartı ──────────────────────────────── */
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; height:100%; display:flex; flex-direction:column;
  position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.quote::before{
  content:'”'; position:absolute; top:8px; right:24px;
  font-family:var(--serif); font-size:5rem; line-height:1;
  color:var(--gold); opacity:.16;
}
.quote__stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:16px; }
.quote__text{ font-size:.98rem; line-height:1.75; color:var(--body); flex:1; }
.quote__who{
  display:flex; align-items:center; gap:12px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft);
}
.quote__avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--navy),var(--navy-soft));
  color:var(--gold-light); font-family:var(--serif); font-size:.95rem; font-weight:600;
}
.quote__name{ font-size:.9rem; font-weight:600; color:var(--ink); }
.quote__role{ font-size:.78rem; color:var(--muted); }

/* Kartlarda altın vurgu — hover'da üstte ince çizgi belirir */
.card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:2px; z-index:4;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover::after{ transform:scaleX(1); }

/* ─── Alt çekmece (mobilde filtre paneli) ─────────────────────
   Masaüstünde .drawer sıradan bir kenar çubuğudur; çekmece
   kılığına yalnızca dar ekranda girer. Tek işaretleme, iki görünüm. */
.drawer-trigger{ display:none; }
.drawer__handle,
.drawer__head{ display:none; }

.drawer-scrim{
  position:fixed; inset:0; z-index:140;
  background:rgba(11,18,32,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility .38s;
}
.drawer-scrim.is-visible{ opacity:1; visibility:visible; }

@media (max-width:960px){
  .drawer-trigger{
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 20px; border-radius:100px; border:1px solid var(--line);
    background:#fff; font-size:.9rem; font-weight:600; color:var(--ink);
    transition:all .28s var(--ease);
  }
  .drawer-trigger:hover{ border-color:var(--navy); }
  .drawer-trigger__count{
    min-width:20px; height:20px; padding:0 6px; border-radius:100px;
    background:var(--gold); color:#fff; font-size:.7rem; font-weight:700;
    display:grid; place-items:center;
  }

  .drawer{
    position:fixed; inset:auto 0 0 0; z-index:150;
    max-height:86svh; width:100%;
    display:flex; flex-direction:column;
    border:0; border-radius:26px 26px 0 0;
    padding:0; margin:0;
    box-shadow:0 -12px 44px rgba(11,18,32,.22);
    transform:translateY(100%);
    transition:transform .42s var(--ease);
    will-change:transform;
  }
  .drawer.is-open{ transform:none; }

  .drawer__handle{
    display:block; padding:12px 0 6px; cursor:grab; touch-action:none; flex-shrink:0;
  }
  .drawer__handle::before{
    content:''; display:block; width:42px; height:4px; margin:0 auto;
    background:var(--line); border-radius:100px;
  }
  .drawer__handle:active{ cursor:grabbing; }

  .drawer__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 22px 14px; border-bottom:1px solid var(--line-soft);
    flex-shrink:0; touch-action:none;
  }
  .drawer__title{ font-size:1.02rem; font-weight:600; color:var(--ink); }
  .drawer__close{
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    background:var(--cream); color:var(--body); transition:all .25s var(--ease);
  }
  .drawer__close:hover{ background:var(--navy); color:#fff; }

  .drawer__body{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:20px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
  }
}

@media (prefers-reduced-motion:reduce){
  .drawer{ transition:none; }
  .drawer-scrim{ transition:none; }
}

/* ─── Sayfalama ───────────────────────────────────────────── */
.pagination{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin-top:48px; }
.pagination__link{
  min-width:42px; height:42px; padding:0 13px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-size:.9rem; font-weight:500; color:var(--body); transition:all .28s var(--ease);
}
.pagination__link:hover{ border-color:var(--navy); color:var(--navy); }
.pagination__link.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pagination__gap{ display:grid; place-items:center; min-width:28px; color:var(--muted); }

/* ─── Uyarı kutuları ──────────────────────────────────────── */
.alert{ padding:14px 18px; border-radius:var(--r); font-size:.92rem; margin-bottom:16px; border-left:3px solid; }
.alert--success{ background:#EAF6F0; border-color:var(--ok); color:#0E5735; }
.alert--error,.alert--danger{ background:#FDECEA; border-color:var(--bad); color:#8C1D18; }
.alert--warning{ background:#FFF8E6; border-color:var(--warn); color:#7A5518; }
.alert--info{ background:#EEF3FB; border-color:var(--navy-soft); color:var(--navy); }

/* ─── Boş durum ───────────────────────────────────────────── */
.empty{ text-align:center; padding:72px 24px; }
.empty__icon{
  width:76px; height:76px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream); color:var(--gold-dark);
}
.empty h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:9px; }
.empty p{ color:var(--muted); max-width:400px; margin-inline:auto; }

/* ─── Alt bilgi ───────────────────────────────────────────── */
.footer{ background:var(--navy-deep); color:rgba(255,255,255,.62); padding-top:clamp(56px,7vw,88px); }
.footer h4{ color:#fff; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px; font-weight:600; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:clamp(28px,4vw,52px); padding-bottom:52px; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.footer a{ transition:color .28s var(--ease); }
.footer a:hover{ color:var(--gold-light); }
.footer li{ margin-bottom:11px; font-size:.92rem; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:24px 0; border-top:1px solid rgba(255,255,255,.09); font-size:.85rem;
}

/* İmza satırı — çok küçük, göze batmayacak kadar sakin; sadece bakan fark eder.
   Etrafında dolanan yılan JS ile canvas olarak eklenir (assets/js/snake.js);
   JS çalışmazsa bu sarmalayıcı sadece metni ortalar, hiçbir şey kaybolmaz. */
.footer__credit-wrap{
  position:relative; display:flex; justify-content:center; padding:16px 0 24px;
}
.footer__credit-canvas{
  position:absolute; z-index:0; pointer-events:none;
}
.footer__credit{
  position:relative; z-index:1; display:inline-block;
  margin:0; padding:0; text-align:center;
  font-size:.7rem; letter-spacing:.06em; font-weight:600;
  color:var(--gold);
  text-shadow:0 0 6px rgba(194,166,97,.35);
  animation:creditGlow 4.5s ease-in-out infinite;
}
@keyframes creditGlow{
  0%,100%{ opacity:.78; text-shadow:0 0 6px rgba(194,166,97,.35); }
  50%    { opacity:1;   text-shadow:0 0 10px rgba(194,166,97,.7); }
}
@media (prefers-reduced-motion:reduce){
  .footer__credit{ animation:none; opacity:.9; }
  .footer__credit-canvas{ display:none; }
}
.social{ display:flex; gap:10px; }
.social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.72); transition:all .32s var(--ease);
}
.social a:hover{ background:var(--gold); color:#fff; transform:translateY(-3px); }

/* ─── Yüzen WhatsApp ──────────────────────────────────────── */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .32s var(--ease);
}
.fab:hover{ transform:scale(1.09) translateY(-2px); }
.fab::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:fabpulse 2.4s ease-out infinite; z-index:-1;
}
@keyframes fabpulse{ 0%{transform:scale(1);opacity:.65} 100%{transform:scale(1.7);opacity:0} }

/* ─── Görünüme girince animasyon ──────────────────────────────
   Gizleme YALNIZCA .js sınıfı varken uygulanır. JavaScript
   çalışmazsa içerik olduğu gibi görünür — animasyon bir süs,
   içeriğin görünürlüğü ona bağlı olmamalı. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s } .reveal[data-delay="2"]{ transition-delay:.18s }
.reveal[data-delay="3"]{ transition-delay:.27s } .reveal[data-delay="4"]{ transition-delay:.36s }
.reveal[data-delay="5"]{ transition-delay:.45s } .reveal[data-delay="6"]{ transition-delay:.54s }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero__media img{ animation:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ─── Lightbox ────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(8,12,20,.96);
  display:none; place-items:center; padding:56px 20px;
}
.lightbox.is-open{ display:grid; }
.lightbox img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--r-sm); }
.lightbox__close{ position:absolute; top:22px; right:24px; color:#fff; width:44px; height:44px;
  border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.lightbox__close:hover{ background:rgba(255,255,255,.2); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:background .3s;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav--prev{ left:20px; } .lightbox__nav--next{ right:20px; }
.lightbox__counter{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.88rem; }

/* ─── Yardımcılar ─────────────────────────────────────────── */
.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; }
.divider{ height:1px; background:var(--line); border:0; margin:32px 0; }
.rule-gold{ width:56px; height:2px; background:var(--gold); border:0; margin:0 0 24px; }
.section-head--center .rule-gold{ margin-inline:auto; }

/* ─── Duyarlı ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .nav,.header__phone,.account{ display:none; }   /* mobilde giriş, menünün altında */
  .burger{ display:flex; }
  .detail-grid{ grid-template-columns:1fr; }
  .sticky-box{ position:static; }
}
@media (max-width:640px){
  :root{ --nav-h:68px; }
  .searchbar{ margin-top:-30px; padding:20px; }
  .searchbar__form{ grid-template-columns:1fr; }
  .hero{ min-height:82svh; }
  .btn{ padding:13px 24px; }
  .toolbar{ padding:13px 15px; }

  /* Menü düğmesi her zaman erişilebilir kalmalı: dar ekranda üstteki
     çağrı düğmesi gizlenir, aynı bağlantı menünün içinde zaten var. */
  .header__actions > .btn{ display:none; }

  /* Kaydırma göstergesi mobilde butonlarla çakışıyor; parmakla zaten kaydırılıyor */
  .hero__scroll{ display:none; }

  /* ── Dokunma hedefleri: parmakla rahat basılabilir olmalı (≥44px) ── */
  .burger{
    width:48px; height:48px; padding:14px 12px;
    align-items:center; justify-content:center; margin-right:-12px;
  }
  .logo{ min-height:48px; }
  .logo__tag{ font-size:.58rem; }          /* 8px çok küçüktü */

  .link-arrow{ padding-block:11px; }
  .footer li a,
  .footer__bottom a{ display:inline-block; padding-block:10px; }
  .footer li{ margin-bottom:4px; }
  .nav__link{ padding-block:14px; }
  .pagination__link{ min-width:46px; height:46px; }
  .chip{ padding-block:9px; }
  .card__link{ min-height:44px; }
  .header__inner{ gap:12px; }
  .logo__tag{ font-size:.5rem; letter-spacing:.14em; }
  .logo img{ height:34px; }
}

/* Çok dar ekranlarda logo yazısı da küçülsün, taşma olmasın */
@media (max-width:360px){
  .logo__name{ font-size:1.2rem; }
  .logo__tag{ display:none; }
}

/* ─── Yazdırma ────────────────────────────────────────────── */
@media print{
  .header,.footer,.fab,.searchbar,.mobile-nav,.btn,.contact-card{ display:none !important; }
  body{ color:#000; } .section{ padding:16px 0; }
}

