/* ===========================================================================
   Demirci Emlak — Balıkesir
   Palet: LACİVERT (baba tabelası) + ALTIN (logo) + KREM. Serif başlık + sans gövde.
   NOT: metinler ve iletişim bilgileri TASLAK; gerçekleriyle güncellenecek.
   =========================================================================== */
: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; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--krem); color:var(--metin);
  font-family:var(--fn); font-size:16px; line-height:1.7;
}
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);
}
.pill{ display:none; }   /* eski kayan pill kaldırıldı — yerine belirgin buton + hover lift */

/* ===========================================================================
   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 (html5up-txt'ten esinlenildi) — 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); }
.eyebrow{ font-size:12px; letter-spacing:.34em; color:var(--altin); margin:0 0 22px; }
.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; }
.hero-btn{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  padding:14px 30px; border-radius:6px; text-decoration:none; font-weight:600; font-size:15px;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-altin{ background:var(--altin); color:var(--lac-koyu); }
.btn-altin:hover{ background:var(--altin-acik); }
.btn-cizgi{ border:1px solid rgba(246,241,231,.38); color:var(--krem); }
.btn-cizgi:hover{ background:rgba(246,241,231,.09); }

.hero-kaydir{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(246,241,231,.5);
}
.hero-kaydir span{ font-size:10px; letter-spacing:.26em; }
.hero-kaydir i{ width:1px; height:36px; background:linear-gradient(rgba(246,241,231,.55), transparent); }

/* ===========================================================================
   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 svg{ width:44%; height:auto; opacity:.45; }
.portre-not{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--metin-soluk); }
.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); }
.il-liste em{ font-style:normal; font-size:13px; color:rgba(246,241,231,.4); }
.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; }
}
@media (max-width:640px){
  .menu{ display:none; }        /* masaüstü pill menü gizlenir */
  .menu-ac{ display:flex; }     /* mobilde hamburger görünür */
  .marka-ad{ font-size:16px; }
}

/* ===========================================================================
   HAREKET — 1) Hero açılış animasyonu, 2) kaydırınca beliren bölümler
   (site-ornek/"Solid State"den esinlenildi; ama jQuery yok, saf CSS + IO.)
   =========================================================================== */

/* 1) HERO AÇILIŞ: başlık/yazı süzülerek gelir. Gecikme ~2.5s → yükleme ekranı (splash ~2s)
   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) 2.5s both; }
.hero-ic h1{ animation-delay:2.55s; }
.hero-ic .hero-alt{ animation-delay:2.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%; } }