/* =========================================================
   gift Gayrimenkul — Kristal Türkiye
   Kurumsal Kimlik Kılavuzu 2025 uyumlu tasarım sistemi
   Renkler: Pantone 282 C (lacivert), Pantone 186 C (kırmızı), 4D4D4F (gri)
   ========================================================= */

/* ---------- 1. TOKENLAR ---------- */
:root{
  /* Marka renkleri — kurumsal kimlik kılavuzu s.10 */
  --navy:            #041E42;   /* Pantone 282 C  R4  G30  B65  */
  --navy-900:        #030F22;
  --navy-800:        #061731;
  --navy-700:        #0A2A5A;
  --navy-600:        #123B78;
  --red:             #CF0A2C;   /* Pantone 186 C  R207 G10  B44 */
  --red-dark:        #A80823;
  --grey:            #3C3C3B;   /* Pantone 4D4D4F R60 G60 B59 */

  /* Nötrler */
  --ink:             #101828;
  --body:            #4A5567;
  --muted:           #7A8699;
  --line:            #E4E8EF;
  --line-soft:       #EEF1F6;
  --surface:         #FFFFFF;
  --surface-alt:     #F6F8FB;
  --surface-navy:    var(--navy);

  /* Tipografi */
  --font-display: "Barlow Condensed", "Uniform Condensed", "Roboto Condensed", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Ölçek */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --radius:    4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(4,30,66,.06), 0 4px 12px rgba(4,30,66,.05);
  --shadow-md: 0 4px 12px rgba(4,30,66,.08), 0 16px 40px rgba(4,30,66,.08);
  --shadow-lg: 0 8px 24px rgba(4,30,66,.10), 0 32px 64px rgba(4,30,66,.12);

  --container: 1240px;
  --header-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--surface); color:var(--body);
  font-family:var(--font-body); font-size:16.5px; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; color:var(--navy); font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--red); color:#fff}

/* ---------- 3. TİPOGRAFİ ---------- */
.h-xxl{font-size:clamp(40px, 5.4vw, 76px); line-height:1.04; letter-spacing:-.015em}
.h-xl {font-size:clamp(34px, 4.4vw, 60px); line-height:1.06; letter-spacing:-.012em}
.h-lg {font-size:clamp(28px, 3.2vw, 42px); line-height:1.12}
.h-md {font-size:clamp(22px, 2.2vw, 28px); line-height:1.2}
.h-sm {font-size:19px; line-height:1.3}

.lead{font-size:clamp(17px,1.35vw,19.5px); line-height:1.7; color:var(--body)}
.small{font-size:14.5px; line-height:1.65}
.tiny{font-size:13px; line-height:1.6}

/* Bölüm etiketi: ince kırmızı çizgi + versal metin */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--red); flex:none}
.on-navy .eyebrow{color:#F5A3B0}
.on-navy .eyebrow::before{background:var(--red)}

.rule{width:56px; height:3px; background:var(--red); border:0; margin:0 0 var(--sp-5)}

/* ---------- 4. YERLEŞİM ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
.section{padding-block:clamp(64px, 8vw, 118px)}
.section--tight{padding-block:clamp(48px, 5.5vw, 78px)}
.section--alt{background:var(--surface-alt)}
.section--navy{background:var(--surface-navy); color:rgba(255,255,255,.78)}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}

.grid{display:grid; gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.stack-6{display:grid; gap:var(--sp-6)}

.head{max-width:660px; margin-bottom:var(--sp-7)}
.head--center{margin-inline:auto; text-align:center}
.head--center .eyebrow{justify-content:center}
.head p{margin-top:var(--sp-4)}

/* ---------- 5. BUTONLAR ---------- */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:1.5px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius); cursor:pointer; transition:.28s var(--ease); position:relative; overflow:hidden;
  line-height:1.2; text-align:center;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(4,30,66,.22)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--red); outline-offset:3px}
.btn svg{width:17px;height:17px;flex:none}

.btn--red{--btn-bg:var(--red); --btn-bd:var(--red)}
.btn--red:hover{--btn-bg:var(--red-dark); --btn-bd:var(--red-dark); box-shadow:0 10px 24px rgba(207,10,44,.28)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:rgba(4,30,66,.28)}
.btn--ghost:hover{--btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:var(--navy)}
.btn--light{--btn-bg:#fff; --btn-fg:var(--navy); --btn-bd:#fff}
.btn--outline-light{--btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.42)}
.btn--outline-light:hover{--btn-bg:#fff; --btn-fg:var(--navy); --btn-bd:#fff}
.btn--wa{--btn-bg:#128C7E; --btn-bd:#128C7E}
.btn--wa:hover{--btn-bg:#0E6E63; --btn-bd:#0E6E63}
.btn--sm{padding:11px 20px; font-size:12px}
.btn--block{display:flex; width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3)}

/* Metin bağlantısı */
.link{
  display:inline-flex; align-items:center; gap:9px; color:var(--navy);
  font-size:13.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:2px solid var(--red); transition:.25s var(--ease);
}
.link:hover{gap:14px; color:var(--red)}
.on-navy .link{color:#fff}
.on-navy .link:hover{color:#fff; border-color:#fff}

/* ---------- 6. HEADER ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--header-h);
  display:flex; align-items:center; transition:.35s var(--ease);
  background:transparent; border-bottom:1px solid transparent;
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); width:100%}
.header.is-solid{
  background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line); box-shadow:0 2px 20px rgba(4,30,66,.06);
  --header-h:76px; height:76px;
}

.brand{display:flex; align-items:center; flex:none}
.brand img{height:62px; width:auto; transition:.35s var(--ease)}
.header.is-solid .brand img{height:52px}
/* Şeffaf header (lacivert hero üzeri): logoyu beyaz plakaya oturt */
.brand__plate{
  background:#fff; padding:8px 14px; border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(0,0,0,.18); transition:.35s var(--ease);
}
.header.is-solid .brand__plate{background:transparent; box-shadow:none; padding:0}

/* Navigasyon */
.nav{display:flex; align-items:center; gap:2px}
.nav a{
  position:relative; padding:10px 15px; font-size:13.5px; font-weight:600;
  letter-spacing:.055em; text-transform:uppercase; color:#fff; transition:.22s var(--ease);
  white-space:nowrap;
}
.header.is-solid .nav a{color:var(--navy)}
.nav a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff}
.header.is-solid .nav a[aria-current="page"]{color:var(--red)}

.header__cta{display:flex; align-items:center; gap:10px; flex:none}
.header__tel{
  display:inline-flex; align-items:center; gap:9px; color:#fff;
  font-size:15px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
.header.is-solid .header__tel{color:var(--navy)}
.header__tel svg{width:17px;height:17px;color:var(--red)}
.header__tel:hover{color:var(--red)}

/* Mobil menü tetikleyici */
.burger{
  display:none; width:46px; height:46px; border:1.5px solid rgba(255,255,255,.45);
  background:transparent; border-radius:var(--radius); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none;
}
.header.is-solid .burger{border-color:var(--line)}
.burger span{display:block; width:20px; height:2px; background:#fff; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:.3s var(--ease);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.header.is-solid .burger span,
.header.is-solid .burger span::before,
.header.is-solid .burger span::after{background:var(--navy)}

/* Mobil çekmece */
.drawer{
  position:fixed; inset:0; z-index:1000; background:var(--navy);
  display:flex; flex-direction:column; padding:24px;
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.drawer.is-open{transform:none; visibility:visible}
.drawer__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-7)}
.drawer__top img{height:58px; background:#fff; padding:8px 12px; border-radius:var(--radius)}
.drawer__close{
  width:46px;height:46px; background:transparent; border:1.5px solid rgba(255,255,255,.3);
  border-radius:var(--radius); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.drawer nav{display:grid; gap:2px; margin-bottom:auto}
.drawer nav a{
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.11); color:#fff;
  font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:.01em;
}
.drawer nav a[aria-current="page"]{color:#F5A3B0}
.drawer__foot{display:grid; gap:10px; padding-top:var(--sp-5)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; min-height:min(88vh, 820px); display:flex; align-items:flex-end;
  background:var(--navy); color:#fff; overflow:hidden; padding-top:var(--header-h);
}
.hero--inner{min-height:min(58vh,520px); align-items:center}
.hero__bg{position:absolute; inset:0; z-index:0}
/* Görsel yuvası: kendi fotoğrafını arka plana koymak için .hero__bg img kullan */
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:.42}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(18,59,120,.62) 0%, rgba(4,30,66,0) 58%),
    linear-gradient(180deg, rgba(3,15,34,.86) 0%, rgba(4,30,66,.70) 42%, rgba(3,15,34,.96) 100%);
}
/* Kurumsal kimlikteki altıgen geometrik desen — düşük opaklıkta doku */
.hero__pattern{
  position:absolute; inset:0; z-index:1; opacity:.16; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3Cpath d='M60 52 L90 69 L90 104 L60 121 L30 104 L30 69 Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:linear-gradient(115deg, transparent 8%, #000 45%, transparent 92%);
  -webkit-mask-image:linear-gradient(115deg, transparent 8%, #000 45%, transparent 92%);
}
.hero__inner{position:relative; z-index:2; width:100%; padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(56px,6vw,96px)}
.hero__content{max-width:760px}
.hero .h-xxl{color:#fff; text-wrap:balance}
.hero .h-xxl em{font-style:normal; color:#fff; position:relative; white-space:nowrap}
.hero .h-xxl em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.10em; background:var(--red); z-index:-1;
}
.hero__sub{max-width:640px; margin-top:var(--sp-5); font-size:clamp(16.5px,1.5vw,19.5px); color:rgba(255,255,255,.82); line-height:1.72}
.hero .btn-row{margin-top:var(--sp-7)}
.hero__badge{
  display:inline-flex; align-items:center; gap:11px; padding:8px 16px 8px 10px;
  border:1px solid rgba(255,255,255,.22); border-radius:100px; background:rgba(255,255,255,.06);
  font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.9);
  margin-bottom:var(--sp-5); backdrop-filter:blur(6px);
}
.hero__badge b{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red)}

/* Hero altı hızlı bilgi şeridi */
.hero__strip{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero__strip{margin-top:clamp(40px,4.5vw,64px)}
.hero__strip div{padding:22px 26px 0; border-left:1px solid rgba(255,255,255,.14)}
.hero__strip div:first-child{border-left:0; padding-left:0}
.hero__strip dt{font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px}
.hero__strip dd{margin:0; font-family:var(--font-display); font-size:26px; font-weight:700; color:#fff; line-height:1.1}

/* ---------- 8. ARAMA / FİLTRE ---------- */
.searchbar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:14px;
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:10px; align-items:end;
}
.searchbar--float{position:relative; z-index:5; margin-top:-52px}
.section--overlap{padding-top:0}
.field{display:grid; gap:6px; min-width:0}
.field label{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.field select,.field input,.field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink); font-size:15px; transition:.2s var(--ease); appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5567' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer;
}
.field textarea{resize:vertical; min-height:132px; line-height:1.65}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(4,30,66,.10);
}
.field--error input,.field--error select,.field--error textarea{border-color:var(--red)}
.field__err{font-size:12.5px; color:var(--red); display:none}
.field--error .field__err{display:block}

/* ---------- 9. KARTLAR ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:.35s var(--ease); display:flex; flex-direction:column; height:100%;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}

/* Portföy kartı */
.pcard__media{
  position:relative; aspect-ratio:4/3; background:var(--navy-800); overflow:hidden;
}
.pcard__media img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .pcard__media img{transform:scale(1.06)}
/* Fotoğraf yoksa gösterilecek marka dokusu */
.pcard__media--empty{
  display:grid; place-items:center;
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
}
.pcard__media--empty::before{
  content:""; position:absolute; inset:0; opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.pcard__media--empty span{
  position:relative; font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.pcard__tag{
  position:absolute; top:14px; left:14px; z-index:2; padding:6px 13px; border-radius:3px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.pcard__tag--kiralik{background:var(--navy)}
.pcard__ref{
  position:absolute; top:14px; right:14px; z-index:2; padding:6px 11px; border-radius:3px;
  background:rgba(3,15,34,.72); color:#fff; font-size:11px; font-weight:600; letter-spacing:.1em;
  backdrop-filter:blur(4px);
}
.pcard__body{padding:24px; display:flex; flex-direction:column; gap:14px; flex:1}
.pcard__loc{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.pcard__loc svg{width:14px;height:14px;color:var(--red);flex:none}
.pcard h3{font-size:22px; line-height:1.22}
.pcard__price{
  font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--navy); line-height:1;
  margin-top:auto; padding-top:14px;
}
.pcard__price small{display:block; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.pcard__specs{
  display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.pcard__specs li{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:3px;
  background:var(--surface-alt); font-size:12.5px; font-weight:600; color:var(--grey);
}
.pcard__foot{padding:0 24px 24px}

/* Hizmet kartı */
.scard{padding:36px 32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); transition:.35s var(--ease); position:relative; overflow:hidden; height:100%}
.scard::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.scard:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.scard:hover::before{transform:scaleX(1)}
.scard__icon{
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:var(--sp-5);
  background:var(--navy); border-radius:var(--radius); color:#fff;
}
.scard__icon svg{width:26px;height:26px}
.scard h3{font-size:23px; margin-bottom:12px}
.scard p{font-size:15.5px; line-height:1.7}
.scard ul{margin-top:16px; display:grid; gap:8px}
.scard ul li{position:relative; padding-left:22px; font-size:14.5px; color:var(--body)}
.scard ul li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--red); border-radius:1px}

/* Değer/özellik kutusu (lacivert zemin) */
.vbox{padding:32px 28px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); background:rgba(255,255,255,.035); transition:.35s var(--ease); height:100%}
.vbox:hover{background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.3)}
.vbox__no{font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:.2em; color:var(--red); margin-bottom:16px}
.vbox h3{font-size:22px; color:#fff; margin-bottom:10px}
.vbox p{font-size:15px; color:rgba(255,255,255,.72); line-height:1.7}

/* Sayaç */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5)}
.stat{padding:28px 24px; border-left:3px solid var(--red); background:var(--surface-alt); border-radius:0 var(--radius) var(--radius) 0}
.section--navy .stat{background:rgba(255,255,255,.05)}
.stat b{display:block; font-family:var(--font-display); font-size:clamp(38px,4.4vw,54px); font-weight:700; color:var(--navy); line-height:1}
.section--navy .stat b{color:#fff}
.stat span{display:block; margin-top:10px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.section--navy .stat span{color:rgba(255,255,255,.6)}

/* Süreç adımları */
.steps{counter-reset:s; display:grid; gap:0}
.steps li{
  counter-increment:s; position:relative; padding:26px 0 26px 74px; border-bottom:1px solid var(--line);
}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:26px;
  font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--red); letter-spacing:.02em;
}
.steps h3{font-size:21px; margin-bottom:7px}
.steps p{font-size:15.5px}

/* Görsel yuvası (fotoğraf gelene kadar) */
.figslot{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 100%);
  display:grid; place-items:center;
}
.figslot--wide{aspect-ratio:16/10}
.figslot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.figslot::after{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='78' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3Cpath d='M60 52 L90 69 L90 104 L60 121 L30 104 L30 69 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.figslot span{
  position:relative; z-index:2; font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45); text-align:center; padding:20px;
}
/* Kırmızı çerçeve aksanı */
.figwrap{position:relative}
.figwrap::before{
  content:""; position:absolute; left:-18px; bottom:-18px; width:46%; height:46%;
  border-left:3px solid var(--red); border-bottom:3px solid var(--red); pointer-events:none; z-index:2;
}

/* Alıntı */
.quote{border-left:3px solid var(--red); padding:6px 0 6px 28px; margin:var(--sp-6) 0}
.quote p{font-family:var(--font-display); font-size:clamp(22px,2.4vw,30px); font-weight:500; line-height:1.35; color:var(--navy)}
.section--navy .quote p{color:#fff}
.quote cite{display:block; margin-top:14px; font-style:normal; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* SSS */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:32px; width:13px; height:13px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); top:36px}
.faq details > div{padding:0 40px 26px 0; font-size:15.5px; line-height:1.75}

/* Bant CTA */
.band{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.band::before{
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:linear-gradient(90deg, transparent 0%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 100%);
}
.band .container{position:relative; z-index:2}
.band__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-7); flex-wrap:wrap}
.band h2{color:#fff; max-width:640px}
.band p{color:rgba(255,255,255,.76); margin-top:14px; max-width:560px}

/* ---------- 10. İLETİŞİM ---------- */
.contactgrid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start}
.infolist{display:grid; gap:2px; margin-top:var(--sp-6)}
.infolist a,.infolist div{
  display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line);
  transition:.25s var(--ease);
}
.infolist a:hover{padding-left:8px}
.infolist a:first-child,.infolist div:first-child{border-top:1px solid var(--line)}
.infoicon{
  width:44px;height:44px;flex:none; display:grid; place-items:center; border-radius:var(--radius);
  background:var(--navy); color:#fff;
}
.infoicon svg{width:19px;height:19px}
.infolist dt{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.infolist dd{margin:0; font-size:16.5px; font-weight:600; color:var(--navy); line-height:1.45}
.infolist dd small{display:block; font-weight:400; font-size:14px; color:var(--body); margin-top:3px}

.formcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3.2vw,44px); box-shadow:var(--shadow-sm)}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.formgrid .full{grid-column:1/-1}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.6; color:var(--body)}
.consent input{width:19px;height:19px;flex:none; margin-top:2px; accent-color:var(--red); cursor:pointer}
.consent a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.formnote{
  margin-top:var(--sp-4); padding:14px 16px; border-radius:var(--radius); font-size:14.5px; display:none;
}
.formnote.ok{display:block; background:#EAF7EF; color:#1B6E3C; border:1px solid #BEE6CD}
.formnote.err{display:block; background:#FDEDEF; color:#9C0A24; border:1px solid #F7C6CE}

.mapwrap{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-alt)}
.mapwrap iframe{display:block; width:100%; height:420px; border:0; filter:grayscale(.35) contrast(1.05)}

/* ---------- 11. FOOTER ---------- */
.footer{background:var(--navy-900); color:rgba(255,255,255,.62); padding-top:clamp(56px,6vw,86px)}
.footer h4{
  color:#fff; font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:var(--sp-5);
}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:var(--sp-7); padding-bottom:var(--sp-8)}
.footer__logo{background:#fff; padding:14px 18px; border-radius:var(--radius); display:inline-block; margin-bottom:var(--sp-5)}
.footer__logo img{height:86px; width:auto}
.footer p{font-size:15px; line-height:1.75; max-width:340px}
.footer nav{display:grid; gap:11px}
.footer nav a,.footer__contact a{font-size:15px; color:rgba(255,255,255,.62); transition:.22s var(--ease)}
.footer nav a:hover,.footer__contact a:hover{color:#fff}
.footer__contact{display:grid; gap:13px}
.footer__contact a,.footer__contact span{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.6}
.footer__contact svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--red)}
.social{display:flex; gap:10px; margin-top:var(--sp-5)}
.social a{
  width:42px;height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); color:#fff; transition:.25s var(--ease);
}
.social a:hover{background:var(--red); border-color:var(--red); transform:translateY(-3px)}
.social svg{width:18px;height:18px}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.11); padding-block:24px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:13.5px;
}
.footer__bar nav{display:flex; gap:22px}
.footer__bar a{font-size:13.5px}

/* ---------- 12. YÜZEN WHATSAPP ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:800;
  display:inline-flex; align-items:center; gap:0; overflow:hidden;
  height:58px; padding:0 18px; border-radius:100px; background:#128C7E; color:#fff;
  box-shadow:0 10px 30px rgba(18,140,126,.45); transition:.32s var(--ease); max-width:58px;
}
.wa-float svg{width:26px;height:26px;flex:none}
.wa-float span{
  white-space:nowrap; font-size:14.5px; font-weight:600; opacity:0; margin-left:0;
  transition:.32s var(--ease);
}
.wa-float:hover{max-width:280px; background:#0E6E63}
.wa-float:hover span{opacity:1; margin-left:12px}
.wa-float:focus-visible{outline:3px solid #fff; outline-offset:3px; max-width:280px}
.wa-float:focus-visible span{opacity:1; margin-left:12px}

/* Yukarı çık */
.totop{
  position:fixed; right:22px; bottom:92px; z-index:790; width:46px;height:46px;
  display:grid; place-items:center; background:var(--navy); color:#fff; border:0;
  border-radius:var(--radius); cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:.3s var(--ease); box-shadow:var(--shadow-md);
}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--red)}

/* ---------- 13. SAYFA BAŞLIĞI (iç sayfalar) ---------- */
.pagehead{
  background:var(--navy); color:#fff; padding-top:calc(var(--header-h) + clamp(48px,5vw,76px));
  padding-bottom:clamp(48px,5vw,76px); position:relative; overflow:hidden;
}
.pagehead::before{
  content:""; position:absolute; inset:0; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3Cpath d='M60 52 L90 69 L90 104 L60 121 L30 104 L30 69 Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:linear-gradient(105deg, transparent 25%, #000 100%);
  -webkit-mask-image:linear-gradient(105deg, transparent 25%, #000 100%);
}
.pagehead .container{position:relative; z-index:2}
.pagehead h1{color:#fff; max-width:900px}
.pagehead p{margin-top:var(--sp-4); max-width:640px; color:rgba(255,255,255,.78); font-size:clamp(16px,1.3vw,18.5px)}
.crumb{display:flex; gap:10px; align-items:center; margin-bottom:var(--sp-5); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.crumb a{color:rgba(255,255,255,.75)} .crumb a:hover{color:#fff}
.crumb span{color:rgba(255,255,255,.35)}

/* ---------- 14. FİLTRE ÇUBUĞU (portföy) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:var(--sp-6)}
.chip{
  padding:10px 20px; border:1.5px solid var(--line); background:#fff; border-radius:100px;
  font-size:13.5px; font-weight:600; color:var(--grey); cursor:pointer; transition:.25s var(--ease);
}
.chip:hover{border-color:var(--navy); color:var(--navy)}
.chip.is-on{background:var(--navy); border-color:var(--navy); color:#fff}
.result-count{font-size:14.5px; color:var(--muted); margin-bottom:var(--sp-5)}
.result-count b{color:var(--navy)}
.empty-state{
  grid-column:1/-1; padding:64px 24px; text-align:center; border:1px dashed var(--line);
  border-radius:var(--radius-lg); background:var(--surface-alt);
}
.empty-state h3{margin-bottom:8px}

/* ---------- 15. ANİMASYON ---------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-reveal][data-delay="4"]{transition-delay:.36s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
}

/* ---------- 16. ERİŞİLEBİLİRLİK ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:2000; padding:14px 22px;
  background:var(--red); color:#fff; font-weight:600;
}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red); outline-offset:2px; border-radius:2px;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.is-locked{overflow:hidden}

/* ---------- 17. DUYARLI ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .header__tel span{display:none}
  .footer__grid{grid-template-columns:1fr 1fr; gap:var(--sp-6)}
  .searchbar{grid-template-columns:repeat(2,1fr)}
  .searchbar .btn{grid-column:1/-1}
}
@media (max-width:900px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:var(--sp-6)}
  .contactgrid{grid-template-columns:1fr}
  .hero__strip{grid-template-columns:repeat(2,1fr)}
  .hero__strip div{padding-inline:0}
  .hero__strip div:nth-child(2n){padding-left:26px; border-left:1px solid rgba(255,255,255,.14)}
  .hero__strip div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14); margin-top:20px; padding-top:20px}
  .band__inner{flex-direction:column; align-items:flex-start}
  .figwrap{max-width:520px}
}
@media (max-width:620px){
  :root{--header-h:76px}
  .container{padding-inline:18px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .searchbar{grid-template-columns:1fr; margin-top:0}
  .searchbar--float{margin-top:var(--sp-6)}
  .formgrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .brand img{height:52px}
  .header.is-solid .brand img{height:46px}
  .hero{min-height:auto}
  .hero__strip{grid-template-columns:repeat(2,1fr)}
  .hero__strip dd{font-size:20px}
  .hero__badge{font-size:11px; letter-spacing:.1em}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .footer__bar{flex-direction:column; align-items:flex-start; text-align:left}
  .footer__bar nav{flex-direction:column; gap:9px}
  .steps li{padding-left:0; padding-top:56px}
  .steps li::before{top:22px}
  .wa-float{right:14px; bottom:14px}
  .totop{right:16px; bottom:84px}
}

/* ---------- 18. BASKI ---------- */
@media print{
  .header,.drawer,.wa-float,.totop,.band,.searchbar{display:none !important}
  body{color:#000; font-size:11pt}
  .section{padding-block:16pt}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}