/* ===========================================================================
   Demirci Emlak — Balıkesir
   Palet: LACİVERT (baba tabelası) + ALTIN (logo) + KREM. Serif başlık + sans gövde.
   =========================================================================== */
:root{
  --lac:      #16233f;   /* lacivert */
  --lac-koyu: #0f1830;
  --altin:    #c9a15a;
  --altin-acik:#e2c583;
  --altin-koyu:#a97f36;
  --krem:     #f6f1e7;
  --krem-koyu:#efe6d4;
  --metin:    #2b3140;
  --metin-soluk:#6b7180;
  --fs: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fn: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
}
*{ box-sizing:border-box; }
/* Zemin lacivert (html VE body): iOS Safari durum çubuğunun arkasını, alt araç
   çubuğu bölgesini ve lastik-bant taşmalarını bu renkten boyar. Sayfa lacivertle
   (hero) başlayıp lacivertle (dip) bittiği için kaynaşır. Body'nin rengi hiçbir
   yerde görünmez — her bölüm kendi zeminini kendisi boyar. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--lac); }
body{
  margin:0; background:var(--lac); color:var(--metin);
  font-family:var(--fn); font-size:16px; line-height:1.7;
}
/* Yatay taşma kilidi: reveal öğeleri belirmeden önce yana kaymış durduğu için
   sayfa mobilde sağa-sola çekiştirilebiliyordu. */
html,body{ overflow-x:hidden; }
@supports (overflow:clip){ html,body{ overflow-x:clip; } }
img{ display:block; max-width:100%; }
::selection{ background:var(--altin); color:var(--lac-koyu); }

.etiket{ font-size:12px; letter-spacing:.28em; color:var(--altin-koyu); margin:0 0 16px; font-weight:600; }
.etiket-altin{ color:var(--altin); }

/* ===========================================================================
   ÜST — hero'nun üstünde yüzer
   =========================================================================== */
.ust{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,54px);
}
.marka{ display:inline-flex; align-items:center; text-decoration:none; }
.marka-im{ height:176px; width:auto; }

.menu{ display:flex; gap:8px; }
.menu a{
  padding:10px 18px; border-radius:11px;
  text-decoration:none; color:var(--krem); font-size:14px; font-weight:600; letter-spacing:.015em;
  border:1px solid rgba(226,197,131,.30);       /* yumuşak altın kenar */
  background:rgba(15,24,48,.30);                 /* buzlu cam gövde */
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 4px 16px rgba(8,13,28,.28);
  transition:transform .2s ease, background-color .25s ease, color .25s ease,
             border-color .25s ease, box-shadow .25s ease;
}
.menu a:hover{
  transform:translateY(-3px);                   /* öne çıkma / lift */
  background:var(--altin); color:var(--lac-koyu); border-color:var(--altin);
  box-shadow:0 10px 22px rgba(201,161,90,.32);
}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--krem); overflow:hidden;
  background-color:var(--lac);
  /* Navy karartma katmanı FOTOĞRAFIN üstünde: solda koyu (yazı okunur),
     merkez-sağa doğru açılır (kapı/ışık görünür). */
  background-image:
    linear-gradient(90deg,
      rgba(15,24,48,.93) 0%, rgba(15,24,48,.80) 34%,
      rgba(15,24,48,.48) 66%, rgba(15,24,48,.60) 100%),
    url('hero-bg.jpg');
  background-size:cover, cover;
  background-position:center, center right;
  background-repeat:no-repeat, no-repeat;
}
/* "Teknik çizim / blueprint" ızgara dokusu — sık ve küçük kareler.
   Sol taraf (yazı alanı) maskeyle korunur: çizgiler yazının üstünde silinir, görselin üstünde belirir. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:
    repeating-linear-gradient(0deg,  rgba(201,161,90,.075) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(201,161,90,.075) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 56%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 56%, #000 100%);
}
.hero-ic{ position:relative; width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(18px,4vw,44px); }
.hero h1{
  font-family:var(--fs); font-weight:600; margin:0 0 24px;
  font-size:clamp(42px,7.5vw,86px); line-height:1.04; letter-spacing:-.01em;
}
.hero-alt{ font-size:clamp(16px,2vw,19px); color:rgba(246,241,231,.72); max-width:520px; margin:0 0 36px; }

/* ===========================================================================
   HAKKINDA
   =========================================================================== */
/* 3 sütun: SOL dükkân görseli (yukarıdan aşağıya tam boy gömülü) | ORTA metin | SAĞ portre.
   Zemin: görselin sıcak-koyu paletiyle uyumlu (cream yerine espresso). */
.hakkinda{
  display:grid; grid-template-columns:0.9fr 1fr 0.75fr; align-items:stretch;
  background:#ded0ba; color:var(--metin);   /* açık sıcak-tan — görselin sıcak paletine yakın, koyu yazı */
}

/* SOL: dükkânın gerçek fotoğrafı — hero gibi, sol kenara tam boy gömülü + üstünde grid */
.hak-gorsel-sub{ position:relative; overflow:hidden; min-height:440px; }
.hak-gorsel-sub img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ORTA: metin (biraz sağa kaydırıldı → portreyle ortalanması için sol boşluk fazla) */
.hak-yazi{ align-self:center; padding:clamp(60px,10vh,120px) clamp(24px,2.5vw,44px) clamp(60px,10vh,120px) clamp(48px,6vw,120px); }
.hak-yazi h2{
  font-family:var(--fs); font-weight:600; color:var(--lac);
  font-size:clamp(28px,4vw,44px); line-height:1.18; margin:0 0 20px;
}
.hak-yazi p{ color:var(--metin); margin:0 0 16px; max-width:520px; }

/* SAĞ: İrfan Çelik portresi (büyük). Sağ boşluk fazla → portre biraz sola gelir. */
.hak-profil{ align-self:center; text-align:center; padding:40px clamp(52px,8vw,170px) 40px clamp(20px,2.5vw,40px); }
.portre{
  width:min(230px,58vw); aspect-ratio:1; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 50% 36%, #ffffff, var(--krem-koyu));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--altin-koyu);
  box-shadow:
    0 0 0 1px var(--altin-koyu),
    0 0 0 10px var(--krem),
    0 0 0 11px rgba(201,161,90,.45),
    0 22px 48px rgba(22,35,63,.18);
}
.portre img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.hak-ad{ font-family:var(--fs); font-weight:600; color:var(--lac); font-size:24px; margin:24px 0 0; }

/* ===========================================================================
   NEDEN — 3 kutu
   =========================================================================== */
.neden{ background:var(--lac); padding:clamp(72px,12vh,124px) clamp(20px,5vw,54px); }   /* koyu band — kartlar parlar */
.neden-bas{ text-align:center; max-width:640px; margin:0 auto 54px; }
.neden-bas h2{ font-family:var(--fs); font-weight:600; color:var(--krem); font-size:clamp(28px,4vw,42px); margin:6px 0 0; }
.kartlar{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1080px; margin:0 auto; }
.kart{
  background:var(--krem); border:1px solid rgba(22,35,63,.09); border-radius:14px;
  padding:38px 30px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.kart:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(22,35,63,.12); }
.kart-ikon{ width:46px; height:46px; margin:0 auto 22px; color:var(--altin-koyu); }
.kart h3{ font-family:var(--fs); font-weight:600; color:var(--lac); font-size:22px; margin:0 0 12px; }
.kart p{ font-size:15px; color:var(--metin-soluk); margin:0; line-height:1.65; }

/* ===========================================================================
   HİZMETLER — kutusuz, ikonlu maddeler (Neden kutularından farklı doku)
   =========================================================================== */
.hizmet{ background:var(--krem); padding:clamp(72px,12vh,120px) clamp(20px,5vw,54px); }
.hizmet-bas{ text-align:center; max-width:640px; margin:0 auto 56px; }
.hizmet-bas h2{ font-family:var(--fs); font-weight:600; color:var(--lac); font-size:clamp(28px,4vw,42px); margin:0; }
.hizmetler{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,4vw,48px); max-width:1000px; margin:0 auto; }
.hizmet-k{ flex:1 1 250px; max-width:290px; text-align:center; }
.hizmet-ikon-c{
  width:66px; height:66px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,161,90,.13); color:var(--altin-koyu);
}
.hizmet-ikon{ width:30px; height:30px; }
.hizmet-k h3{ font-family:var(--fs); font-weight:600; color:var(--lac); font-size:21px; margin:0 0 10px; }
.hizmet-k p{ font-size:15px; color:var(--metin-soluk); line-height:1.65; margin:0; }
/* kademeli sıralı geliş */
.hizmetler .hizmet-k:nth-child(2){ transition-delay:.08s; }
.hizmetler .hizmet-k:nth-child(3){ transition-delay:.16s; }
.hizmetler .hizmet-k:nth-child(4){ transition-delay:.24s; }
.hizmetler .hizmet-k:nth-child(5){ transition-delay:.32s; }

/* ===========================================================================
   BÖLGELER — etiketler (chip)
   =========================================================================== */
.bolge{ background:#ded0ba; padding:clamp(72px,12vh,118px) clamp(20px,5vw,54px); }   /* sıcak-tan (hakkımızdayla aynı aile) */
.bolge-ic{ max-width:840px; margin:0 auto; text-align:center; }
.bolge-ic h2{ font-family:var(--fs); font-weight:600; color:var(--lac); font-size:clamp(28px,4vw,42px); margin:0 0 14px; }
.bolge-alt{ color:var(--metin-soluk); max-width:560px; margin:0 auto 36px; line-height:1.7; }
.bolge-etiketler{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.bolge-etiketler li{
  padding:9px 18px; border-radius:999px; background:#fff;
  border:1px solid rgba(22,35,63,.12); color:var(--metin); font-size:14px; font-weight:500;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.bolge-etiketler li:hover{ transform:translateY(-2px); border-color:var(--altin); box-shadow:0 8px 16px rgba(22,35,63,.09); }
.bolge-etiketler li.daha{ background:transparent; border-style:dashed; color:var(--altin-koyu); }

/* ===========================================================================
   İLETİŞİM (dip)
   =========================================================================== */
.iletisim{ background:var(--lac); color:var(--krem); padding:clamp(66px,10vh,104px) clamp(20px,5vw,54px) 40px; }
.il-ic{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:center; }
.il-logo{ width:190px; max-width:60%; }
.il-bilgi h2{ font-family:var(--fs); font-weight:600; font-size:clamp(26px,3.5vw,38px); margin:0 0 14px; }
.il-slogan{ color:rgba(246,241,231,.72); max-width:440px; margin:0 0 30px; line-height:1.7; }
.il-liste{ list-style:none; margin:0; padding:0; }
.il-liste li{ display:flex; flex-direction:column; gap:2px; padding:14px 0; border-top:1px solid rgba(246,241,231,.12); }
.il-liste li:last-child{ border-bottom:1px solid rgba(246,241,231,.12); }
.il-liste span{ font-size:12px; letter-spacing:.2em; color:var(--altin); }
.il-liste a{ color:var(--krem); text-decoration:none; font-size:17px; }
.il-liste a:hover{ color:var(--altin-acik); }
.telif{ text-align:center; margin:56px 0 0; font-size:12px; color:rgba(246,241,231,.4); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:820px){
  .hakkinda{ grid-template-columns:1fr; }
  .hak-gorsel-sub{ min-height:auto; }          /* mobilde görsel doğal boyunda, kesilmesin */
  .hak-gorsel-sub img{ height:auto; }
  .kartlar{ grid-template-columns:1fr; }
  .il-ic{ grid-template-columns:1fr; text-align:center; }
  .il-liste li{ align-items:center; }
  .il-logo{ margin:0 auto; }
  .il-slogan{ margin-left:auto; margin-right:auto; }   /* max-width'li kutu da ortalansın */
}
/* (≤640px menü kuralları dosyanın SONUNDA — .menu-ac tabanından sonra gelmeli ki kazansın.) */

/* ===========================================================================
   HAREKET — 1) Hero açılış animasyonu, 2) kaydırınca beliren bölümler
   (kütüphanesiz — saf CSS + IntersectionObserver.)
   =========================================================================== */

/* 1) HERO AÇILIŞ: başlık/yazı süzülerek gelir. Gecikme ~1.5s → yükleme ekranı (splash ~1s)
   kalkarken oynar; böylece açılışı splash arkasında kaçırmayız. SAF CSS (JS'e bağlı değil,
   hiçbir senaryoda görünmez kalmaz), reduced-motion'da kapalı. */
@keyframes yuksel{
  from{ opacity:0; transform:translateY(16px); filter:blur(3px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0);   }
}
.hero-ic > *{ animation:yuksel .9s cubic-bezier(.2,.7,.2,1) 1.5s both; }
.hero-ic h1{ animation-delay:1.55s; }
.hero-ic .hero-alt{ animation-delay:1.7s; }

/* 2) SCROLL-REVEAL: bölümler görünür alana girince yumuşakça yerine oturur.
   Gizleme SADECE .js açıkken; JS kapalıysa içerik normal görünür. */
[data-reveal]{ transition:opacity 1s ease, transform 1.05s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal]{ opacity:0; transform:translateY(34px); }        /* varsayılan: alttan süzülür */
.js [data-reveal="left"]{  transform:translateX(-48px); }          /* soldan */
.js [data-reveal="right"]{ transform:translateX(48px); }           /* sağdan */
.js [data-reveal="up"]{    transform:translateY(34px); }           /* alttan (açıkça) */
[data-reveal].gorunur{ opacity:1; transform:none; }
[data-reveal-gec]{  transition-delay:.16s; }   /* sıralı geliş: 2. öğe */
[data-reveal-gec2]{ transition-delay:.32s; }   /* sıralı geliş: 3. öğe */

/* Hareketi azalt tercihi olan ziyaretçi için: her şey sabit ve görünür. */
@media (prefers-reduced-motion:reduce){
  .hero-ic > *{ animation:none !important; }
  [data-reveal]{ transition:none !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .yuk-logo, .yuk-bar::before{ animation:none !important; }
}

/* ===========================================================================
   MOBİL MENÜ — sağdan kayan overlay (yalnızca ≤640px'te görünür)
   =========================================================================== */
.menu-ac{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:6px; cursor:pointer;
}
.menu-ac span{ display:block; width:26px; height:2px; border-radius:2px; background:var(--krem); }

.mobil-katman{
  position:fixed; inset:0; z-index:60; overflow:hidden; pointer-events:none;
}
.mobil-katman::before{                 /* arkadaki karartma */
  content:""; position:absolute; inset:0;
  background:rgba(8,13,28,.55); opacity:0; transition:opacity .35s ease;
}
.mobil-menu{
  position:absolute; top:0; right:0; height:100%;
  width:min(80vw,320px); background:var(--lac-koyu);
  display:flex; flex-direction:column; gap:4px;
  padding:84px 30px 30px;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.65,0,.35,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.4);
}
.mobil-menu a{
  color:var(--krem); text-decoration:none;
  font-family:var(--fs); font-size:20px; font-weight:500;
  padding:15px 4px; border-bottom:1px solid rgba(246,241,231,.1);
}
.mobil-menu a:hover{ color:var(--altin-acik); }
.menu-kapa{
  position:absolute; top:20px; right:22px;
  background:none; border:0; color:var(--krem);
  font-size:32px; line-height:1; cursor:pointer;
}
.mobil-katman.acik{ pointer-events:auto; }
.mobil-katman.acik::before{ opacity:1; }
.mobil-katman.acik .mobil-menu{ transform:translateX(0); }
body.menu-kilit{ overflow:hidden; }    /* menü açıkken arka plan kaymasın */

/* ===========================================================================
   YÜKLENME EKRANI (splash) — sadece JS açıkken; yüklenince .gizle ile kaybolur
   =========================================================================== */
#yukleme{ display:none; }
.js #yukleme{
  display:flex; position:fixed; inset:0; z-index:9999;
  flex-direction:column; align-items:center; justify-content:center; gap:28px;
  background:var(--lac);
  animation:yukGuvenlik .6s ease 3.4s forwards;   /* güvenlik: JS kapatamazsa ~3.4s'de kendi kapanır */
}
#yukleme.gizle{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
@keyframes yukGuvenlik{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.yuk-logo{ width:170px; height:auto; animation:yukNabiz 1.7s ease-in-out infinite; }
@keyframes yukNabiz{ 0%,100%{ opacity:.6; transform:scale(.97); } 50%{ opacity:1; transform:scale(1); } }
.yuk-bar{
  width:130px; height:2px; border-radius:2px; overflow:hidden; position:relative;
  background:rgba(226,197,131,.18);
}
.yuk-bar::before{
  content:""; position:absolute; top:0; left:-45%; height:100%; width:42%;
  background:var(--altin); border-radius:2px; animation:yukKay 1.1s ease-in-out infinite;
}
@keyframes yukKay{ 0%{ left:-45%; } 100%{ left:100%; } }

/* ===========================================================================
   ÇENTİKLİ EKRANLAR (iPhone vb.) — viewport-fit=cover ile sayfa çentiğin
   altına uzanır; içerik güvenli alanın içinde kalacak şekilde itilir.
   =========================================================================== */
@supports (padding:max(0px)){
  .ust{
    padding-top:max(22px, env(safe-area-inset-top));
    padding-left:max(clamp(20px,5vw,54px), env(safe-area-inset-left));
    padding-right:max(clamp(20px,5vw,54px), env(safe-area-inset-right));
  }
  .hero-ic{
    padding-left:max(clamp(18px,4vw,44px), env(safe-area-inset-left));
    padding-right:max(clamp(18px,4vw,44px), env(safe-area-inset-right));
  }
  .hak-yazi{
    padding-left:max(clamp(48px,6vw,120px), env(safe-area-inset-left));
    padding-right:max(clamp(24px,2.5vw,44px), env(safe-area-inset-right));
  }
  .hak-profil{
    padding-left:max(clamp(20px,2.5vw,40px), env(safe-area-inset-left));
    padding-right:max(clamp(52px,8vw,170px), env(safe-area-inset-right));
  }
  .neden,.hizmet,.bolge,.iletisim{
    padding-left:max(clamp(20px,5vw,54px), env(safe-area-inset-left));
    padding-right:max(clamp(20px,5vw,54px), env(safe-area-inset-right));
  }
  .iletisim{ padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
  .mobil-menu{ padding-top:max(84px, calc(env(safe-area-inset-top) + 44px)); }
  .menu-kapa{ top:max(20px, env(safe-area-inset-top)); }
}

/* Kısa yatay ekran (telefon yan çevrilince): logo küçülür, hero metni
   üst barın altında kalan alanda ortalanır — binişme olmaz. */
@media (orientation:landscape) and (max-height:520px){
  .marka-im{ height:84px; }
  .hero-ic{
    display:flex; flex-direction:column; justify-content:center;
    min-height:100svh; padding-top:104px; padding-bottom:36px;
  }
  .hero h1{ font-size:clamp(30px,5.5vw,46px); margin-bottom:12px; }
  .hero-alt{ font-size:15px; margin-bottom:0; }
}

/* Dar ekran menüsü — .menu-ac tabanı yukarıda tanımlandığı için bu blok
   dosyanın sonunda durmalı (aynı güçteki kurallarda sonra gelen kazanır). */
@media (max-width:640px){
  .menu{ display:none; }        /* masaüstü menü gizlenir */
  .menu-ac{ display:flex; }     /* mobilde hamburger görünür */
}