/* =====================================================================
   CityOtel - Public Site
   Palet ve tipografi, otelin kendi sitesinden (cypruscityhotel.com)
   BİREBİR taşınmıştır. Bilinçli fark: gerçek fotoğraflar hazır olmadığı
   için oda/galeri görselleri yerine markaya uygun placeholder desenler
   kullanılır (Media modülü tamamlanınca gerçek fotoğraflarla değişecek).
   ===================================================================== */
:root{
  --ink:#182620;
  --deep-sea:#0F2E3B;
  --deep-sea-2:#123847;
  --sea:#2E7C8C;
  --sea-light:#9FCAD1;
  --sand:#F4EEE1;
  --sand-2:#EAE1CC;
  --stone:#D8CDAF;
  --sun:#E2A23C;
  --sun-deep:#C77F26;
  --white:#FFFDF8;
  --shadow: 0 18px 40px -20px rgba(15,46,59,0.35);
  --radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--deep-sea);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'Public Sans',sans-serif; font-size:12.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--sun-deep); font-weight:600;
}
::selection{background:var(--sun);color:var(--deep-sea);}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- HEADER ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(15,46,59,0.0);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:22px 0;
}
header.site-header.scrolled{
  background:rgba(15,46,59,0.94);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
  padding:12px 0;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:0 28px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--white); font-family:'Fraunces',serif; font-size:21px; font-weight:500;}
.brand svg{width:30px;height:30px;flex-shrink:0;}
.brand .sub{display:block; font-family:'Public Sans',sans-serif; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--sea-light); font-weight:500; margin-top:1px;}
nav.links{display:flex; gap:34px; flex-wrap:wrap; row-gap:6px;}
nav.links a{color:var(--white); font-size:14px; font-weight:500; letter-spacing:0.01em; position:relative; padding:4px 0; opacity:0.88;}
nav.links a:hover{opacity:1;}
nav.links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--sun); transition:width .3s ease;}
nav.links a:hover::after{width:100%;}
.header-cta{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.phone-pill{color:var(--white); font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sun); color:var(--deep-sea);
  font-weight:600; font-size:13.5px; letter-spacing:0.01em;
  padding:11px 22px; border-radius:2px; border:none; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
  font-family:'Public Sans',sans-serif;
}
.btn:hover{background:var(--white); transform:translateY(-1px);}
.btn.ghost{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.45);}
.btn.ghost:hover{background:rgba(255,255,255,0.1); border-color:var(--white);}
.btn.dark{background:var(--deep-sea); color:var(--white);}
.btn.dark:hover{background:var(--deep-sea-2);}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.menu-toggle{display:none; background:none;border:none; cursor:pointer; padding:6px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--white); margin:5px 0; transition:.3s;}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--deep-sea);}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg .art{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(226,162,60,0.22), transparent 40%),
    radial-gradient(circle at 82% 70%, rgba(46,124,140,0.4), transparent 45%),
    linear-gradient(160deg, #0F2E3B 0%, #123847 45%, #0B242F 100%);
  animation:heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{transform:scale(1.04);} to{transform:scale(1.0);} }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  /* Fotografin uzerindeki perde. Ustteki iki durak fotografi ne kadar
     gosterecegimizi belirler; alttaki durak zaten kapali ki istatistik
     satiri ve butonlar her fotografta okunur kalsin. */
  background:linear-gradient(180deg, rgba(15,46,59,0.58) 0%, rgba(15,46,59,0.50) 40%, rgba(15,46,59,0.94) 100%);
}
.hero-content{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:160px 28px 96px;}
.hero-eyebrow{color:var(--sun); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.hero-eyebrow .line{width:40px;height:1px;background:var(--sun);}
h1.hero-title{color:var(--white); font-size:clamp(40px, 7vw, 88px); line-height:1.02; font-weight:500; max-width:820px; text-wrap:balance;}
h1.hero-title em{font-style:italic; color:var(--sun); font-weight:400;}
.hero-sub{color:var(--sea-light); font-size:18px; max-width:520px; margin-top:26px; font-weight:300; line-height:1.65;}
.hero-actions{display:flex; gap:16px; margin-top:42px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:0; margin-top:64px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.18); padding-top:28px;}
.hero-stat{padding-right:44px; margin-right:44px; border-right:1px solid rgba(255,255,255,0.18);}
.hero-stat:last-child{border-right:none;}
.hero-stat .num{font-family:'Fraunces',serif; color:var(--white); font-size:32px; font-weight:500; display:block;}
.hero-stat .lbl{color:var(--sea-light); font-size:12.5px; letter-spacing:0.04em; margin-top:3px; display:block;}
.scroll-cue{position:absolute; right:36px; bottom:36px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--sea-light); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;}
.scroll-cue .stick{width:1px; height:46px; background:linear-gradient(180deg, var(--sun), transparent); position:relative; overflow:hidden;}
.scroll-cue .stick::after{content:''; position:absolute; left:0; top:-46px; width:100%; height:46px; background:var(--white); animation:cueMove 1.8s ease-in-out infinite;}
@keyframes cueMove{ to{top:100%;} }

/* ---------- SECTION GENERIC ---------- */
section{position:relative;}
.section-pad{padding:110px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(30px,4vw,46px); max-width:560px; text-wrap:balance;}
.section-head .desc{max-width:340px; color:#5b6b64; font-size:15px; font-weight:300; line-height:1.7;}

/* ---------- ABOUT ---------- */
.about{background:var(--sand);}
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;}
.about-copy p{color:#3d4a45; font-size:16.5px; font-weight:300; line-height:1.85; margin-top:20px;}
.about-copy p:first-of-type{margin-top:26px;}
.about-frame{position:relative; border-radius:2px; overflow:hidden; box-shadow:var(--shadow); height:520px;
  background:
    radial-gradient(circle at 25% 20%, rgba(226,162,60,0.28), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(159,202,209,0.35), transparent 50%),
    linear-gradient(150deg, var(--deep-sea) 0%, var(--sea) 100%);
}
.about-frame .motif{position:absolute; inset:0; opacity:.5;}
.about-badge{position:absolute; left:-26px; bottom:-26px; background:var(--sun); color:var(--deep-sea); padding:22px 26px; max-width:210px; box-shadow:0 14px 30px -12px rgba(0,0,0,0.35);}
.about-badge .num{font-family:'Fraunces',serif; font-size:30px; font-weight:600; display:block;}
.about-badge .txt{font-size:12.5px; font-weight:600; margin-top:2px; display:block; letter-spacing:0.01em;}

/* ---------- PROXIMITY ---------- */
.proximity{background:var(--deep-sea); color:var(--white); position:relative; overflow:hidden;}
.proximity::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 18% 20%, rgba(46,124,140,0.35), transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(226,162,60,0.14), transparent 40%);
  pointer-events:none;
}
.proximity .section-head h2{color:var(--white);}
.proximity .section-head .desc{color:var(--sea-light);}
.prox-map{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center;}
.prox-radial{position:relative; width:100%; aspect-ratio:1/1; max-width:460px; margin:0 auto;}
.prox-list{display:flex; flex-direction:column; gap:0;}
.prox-item{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,0.14);}
.prox-item:first-child{padding-top:0;}
.prox-item .name{font-family:'Fraunces',serif; font-size:19px; font-weight:400; display:flex; align-items:center; gap:12px;}
.prox-item .name .dot{width:7px;height:7px;border-radius:50%; background:var(--sun); flex-shrink:0;}
.prox-item .dist{font-family:'Fraunces',serif; font-style:italic; color:var(--sun); font-size:19px; white-space:nowrap;}

/* ---------- ROOMS ---------- */
.rooms{background:var(--sand);}
.room-card{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--white); box-shadow:var(--shadow); margin-bottom:36px; overflow:hidden;}
.room-card:nth-child(odd) .room-gallery{order:1;}
.room-card:nth-child(odd) .room-info{order:2;}
.room-card:nth-child(even) .room-gallery{order:2;}
.room-card:nth-child(even) .room-info{order:1;}
.room-gallery{position:relative; min-height:400px;}
.room-gallery .g-placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.room-gallery .g-placeholder svg{width:38%; height:38%; opacity:.85;}
.room-info{padding:52px 54px; display:flex; flex-direction:column; justify-content:center;}
.room-info .eyebrow{margin-bottom:14px;}
.room-info h3{font-size:29px; margin-bottom:16px;}
.room-info p.desc{color:#5b6b64; font-size:15px; font-weight:300; line-height:1.75; margin-bottom:26px;}
.room-feats{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:26px;}
.room-feats span{font-size:13px; color:var(--deep-sea); font-weight:500; display:flex; align-items:center; gap:7px;}
.room-feats svg{width:16px;height:16px; color:var(--sea); flex-shrink:0;}
.room-price{display:flex; align-items:baseline; gap:8px; margin-bottom:20px;}
.room-price .amount{font-family:'Fraunces',serif; font-size:26px; color:var(--deep-sea); font-weight:600;}
.room-price .unit{font-size:13px; color:#5b6b64;}

/* ---------- AMENITIES ---------- */
.amenities{background:var(--sand-2); position:relative;}
.amen-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.amen-col h3{font-size:14px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--deep-sea); margin-bottom:26px; padding-bottom:14px; border-bottom:2px solid var(--stone); font-family:'Public Sans',sans-serif;}
.amen-col.paid h3{border-color:var(--sun);}
ul.amen-list{list-style:none; margin:0; padding:0;}
ul.amen-list li{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(23,38,32,0.08); font-size:15px; color:var(--ink); font-weight:400;}
ul.amen-list li:last-child{border-bottom:none;}
ul.amen-list li svg{width:18px;height:18px;color:var(--sea); flex-shrink:0;}
.amen-col.paid ul.amen-list li svg{color:var(--sun-deep);}
.tag-paid{margin-left:auto; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; background:rgba(226,162,60,0.16); color:var(--sun-deep); padding:3px 9px; border-radius:20px; font-weight:600;}

/* ---------- REZERVASYON WIDGET ---------- */
.booking{background:var(--white); position:relative; z-index:5;}
.booking-card{
  background:var(--deep-sea); color:var(--white); border-radius:3px; box-shadow:var(--shadow);
  padding:36px 40px; margin-top:-92px; position:relative; z-index:10;
}
.booking-title{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--sea-light); font-weight:600; margin-bottom:20px;}
.booking-grid{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:18px; align-items:end;}
.booking-field label{display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sea-light); margin-bottom:8px;}
.booking-field input, .booking-field select{
  width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
  color:var(--white); padding:12px 14px; border-radius:2px; font:inherit; font-size:14.5px;
  font-family:'Public Sans',sans-serif; color-scheme:dark;
}
.booking-field input:focus, .booking-field select:focus{outline:2px solid var(--sun); border-color:var(--sun);}
.booking-grid .btn{padding:13px 26px; white-space:nowrap;}
@media (max-width:900px){ .booking-grid{grid-template-columns:1fr 1fr;} .booking-grid .btn{grid-column:1/-1;} }

/* ---------- ARAMA SONUCLARI ---------- */
.results-summary{background:var(--sand-2); padding:28px 0; margin-top:64px;}
.results-summary p{margin:0; font-size:15px;}
.result-card{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--white); box-shadow:var(--shadow); padding:28px 32px; margin-bottom:20px;
}
.result-card .name{font-size:22px; margin-bottom:6px;}
.result-card .meta{color:#5b6b64; font-size:14px;}
.result-card .price-block{text-align:right;}
.result-card .price-block .amount{font-family:'Fraunces',serif; font-size:28px; color:var(--deep-sea); font-weight:600;}
.result-card .price-block .note{font-size:12.5px; color:#5b6b64;}
.empty-results{text-align:center; padding:80px 20px; color:#5b6b64;}
.empty-results h3{margin-bottom:10px; color:var(--deep-sea);}

/* ---------- REZERVASYON FORMU ---------- */
.book-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start;}
.book-form-card{background:var(--white); box-shadow:var(--shadow); padding:40px 44px;}
.book-summary{background:var(--deep-sea); color:var(--white); padding:36px 38px; position:sticky; top:110px;}
.book-summary h3{color:var(--white); font-size:20px; margin-bottom:22px;}
.summary-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.14); font-size:14.5px;}
.summary-row.total{border-top:1px solid rgba(255,255,255,0.3); border-bottom:none; margin-top:8px; padding-top:16px; font-family:'Fraunces',serif; font-size:19px;}
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:13px; font-weight:600; color:var(--deep-sea); margin-bottom:7px;}
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--stone); background:var(--sand); padding:12px 14px;
  border-radius:2px; font:inherit; font-size:14.5px; color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--sea); border-color:var(--sea);}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field-error{color:#a63a2b; font-size:12.5px; margin-top:5px;}
@media (max-width:900px){ .book-layout{grid-template-columns:1fr;} .book-summary{position:static;} }

/* ---------- ONAY / SORGULAMA ---------- */
.confirm-box{max-width:640px; margin:0 auto; text-align:center; padding:60px 0;}
.confirm-icon{width:64px; height:64px; margin:0 auto 24px; color:var(--sea);}
.confirm-number{font-family:'Fraunces',serif; font-size:34px; color:var(--deep-sea); margin:18px 0;}
.lookup-form{max-width:460px; margin:0 auto; background:var(--white); box-shadow:var(--shadow); padding:36px 40px;}
.status-badge{display:inline-block; padding:6px 16px; border-radius:20px; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;}
.status-badge.pending{background:rgba(226,162,60,0.18); color:var(--sun-deep);}
.status-badge.confirmed{background:rgba(46,124,140,0.18); color:var(--sea);}
.status-badge.checked_in, .status-badge.checked_out{background:rgba(23,38,32,0.1); color:var(--ink);}
.status-badge.cancelled, .status-badge.no_show{background:rgba(166,58,43,0.15); color:#a63a2b;}

/* ---------- CONTACT ---------- */
.contact{background:var(--deep-sea); color:var(--white); position:relative; overflow:hidden;}
.contact::before{content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 80% 30%, rgba(46,124,140,0.3), transparent 45%); pointer-events:none;}
.contact-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;}
.contact-info h2{color:var(--white); font-size:clamp(28px,4vw,42px); margin-bottom:24px; max-width:420px;}
.contact-info p.lead{color:var(--sea-light); font-size:16px; font-weight:300; margin-bottom:40px; max-width:420px; line-height:1.7;}
.info-row{display:flex; gap:18px; padding:20px 0; border-top:1px solid rgba(255,255,255,0.15);}
.info-row:last-of-type{border-bottom:1px solid rgba(255,255,255,0.15);}
.info-row svg{width:22px;height:22px; color:var(--sun); flex-shrink:0; margin-top:2px;}
.info-row .lbl{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sea-light); margin-bottom:5px;}
.info-row .val{font-family:'Fraunces',serif; font-size:19px; font-weight:400;}
.info-row a.val:hover{color:var(--sun);}
.contact-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.contact-card{background:rgba(255,253,248,0.04); border:1px solid rgba(255,255,255,0.14); padding:44px;}
.contact-card h3{color:var(--white); font-size:22px; margin-bottom:20px;}
.contact-card .kale-svg{width:100%; height:auto; margin-bottom:26px;}
.contact-card .map-link{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid rgba(255,255,255,0.14); font-size:14px;}
.contact-card .map-link:first-of-type{border-top:none;}

/* ---------- FOOTER ---------- */
footer.site-footer{background:#0B242F; color:rgba(255,253,248,0.6); padding:50px 0 30px;}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
footer .brand{color:var(--white);}
.footer-links{display:flex; gap:28px; font-size:13.5px;}
.footer-links a:hover{color:var(--sun);}
.footer-bottom{margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- FLOATING WHATSAPP ---------- */
.float-wa{position:fixed; right:26px; bottom:26px; z-index:900; width:58px; height:58px; border-radius:50%; background:#1F8A57; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,0.5); transition:transform .25s ease;}
.float-wa:hover{transform:scale(1.08);}
.float-wa svg{width:28px;height:28px;color:#fff;}

/* ---------- ALERT ---------- */
.notice{padding:14px 18px; border-radius:2px; margin-bottom:24px; font-size:14.5px;}
.notice.success{background:rgba(46,124,140,0.12); color:var(--deep-sea); border:1px solid var(--sea);}
.notice.error{background:rgba(166,58,43,0.1); color:#a63a2b; border:1px solid #a63a2b;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .about-grid, .prox-map, .amen-grid, .contact-grid{grid-template-columns:1fr;}
  .about-frame{height:380px;}
  .about-badge{left:16px; bottom:16px;}
  .room-card{grid-template-columns:1fr;}
  .room-card .room-gallery, .room-card .room-info{order:initial;}
  .room-gallery{min-height:280px;}
  .room-info{padding:38px 32px;}
  .booking-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 760px){
  nav.links, .header-cta .phone-pill{display:none;}
  .menu-toggle{display:block;}
  .hero-content{padding:150px 20px 70px;}
  .hero-stats{gap:0;}
  .hero-stat{padding-right:22px; margin-right:22px;}
  .section-pad{padding:76px 0;}
  .section-head{margin-bottom:40px;}
  .container{padding:0 20px;}
  .booking-grid{grid-template-columns:1fr;}
  .booking-card{padding:28px 24px; margin-top:-60px;}
}
nav.links.mobile-open{display:flex; position:fixed; inset:0; background:var(--deep-sea); flex-direction:column; align-items:center; justify-content:center; gap:30px; z-index:1500;}
nav.links.mobile-open a{font-size:24px; font-family:'Fraunces',serif;}
.close-menu{position:fixed; top:24px; right:24px; z-index:1600; display:none; background:none;border:none; color:var(--white); cursor:pointer;}
.close-menu.show{display:block;}

/* =====================================================================
   FOTOGRAFLAR (panelden yuklenen gorseller)
   Gorsel yoksa mevcut .g-placeholder / .hero-bg .art tasarimi kalir.
   ===================================================================== */

/* Oda karti / detay kapak fotografi */
.room-gallery .g-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Detay sayfasindaki kucuk resim seridi */
.g-strip{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:8px; padding:12px;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  overflow-x:auto;
}

.g-dot{
  flex:0 0 auto; width:72px; height:52px;
  padding:0; border:2px solid rgba(255,255,255,.6); border-radius:4px;
  background:none; cursor:pointer; overflow:hidden;
  transition:border-color .2s, transform .2s;
}

.g-dot:hover,
.g-dot:focus-visible{ border-color:#fff; transform:translateY(-2px); }

.g-dot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Acilis bolumu fotografi — uzerindeki metin okunur kalsin diye
   mevcut .hero-bg::after karartmasi aynen gecerlidir. */
.hero-bg .hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

@media (max-width:760px){
  .g-dot{ width:58px; height:42px; }
}

/* =====================================================================
   GALERI SAYFASI
   ===================================================================== */

.gal-album{ margin-bottom:56px; }
.gal-head{ margin-bottom:18px; }
.gal-head h3{ font-size:26px; margin:0 0 6px; }
.gal-head .desc{ margin:0; }

.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}

.gal-item{
  position:relative; padding:0; border:none; border-radius:6px;
  overflow:hidden; cursor:pointer; background:none; aspect-ratio:4 / 3;
}

.gal-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}

.gal-item:hover img,
.gal-item:focus-visible img{ transform:scale(1.05); }

/* Buyutulmus gorsel */
.gal-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  background:rgba(10,20,28,.92);
}

.gal-lightbox[hidden]{ display:none; }

.gal-lightbox img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:4px;
}

.gal-close{
  position:absolute; top:18px; right:22px;
  width:44px; height:44px;
  font-size:30px; line-height:1;
  color:#fff; background:rgba(255,255,255,.12);
  border:none; border-radius:50%; cursor:pointer;
}

.gal-close:hover{ background:rgba(255,255,255,.25); }

@media (max-width:760px){
  .gal-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
  .gal-lightbox{ padding:16px; }
}

/* =====================================================================
   MISAFIR ODEME EKRANI
   ===================================================================== */

.pay-card{
  background:#fff; border:1px solid var(--stone);
  border-radius:12px; padding:26px 28px; margin-bottom:18px;
}

.pay-title{ font-size:20px; margin:0 0 10px; color:var(--deep-sea); }
.pay-desc{ margin:0 0 16px; font-size:15px; line-height:1.6; color:#4a5b66; }
.pay-hint{ margin:14px 0 0; font-size:13px; line-height:1.6; color:#77858f; }

.pay-head{
  display:flex; flex-wrap:wrap; gap:24px;
  padding-bottom:16px; border-bottom:1px solid var(--stone);
}

.pay-head .lbl{ display:block; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:#8b98a2; margin-bottom:3px; }
.pay-head .val{ display:block; font-size:16px; font-weight:600; color:var(--deep-sea); }
.pay-head .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.pay-rows{ padding:6px 0; }

.pay-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; font-size:14px; color:#4a5b66;
  border-bottom:1px solid #eef1f3;
}

.pay-row:last-child{ border-bottom:none; }

.pay-totals{
  margin-top:14px; padding:16px 18px;
  background:#f4f7f9; border-radius:9px;
}

.pay-totals > div{
  display:flex; justify-content:space-between; gap:16px;
  font-size:14px; color:#4a5b66; padding:4px 0;
}

.pay-totals .big{
  margin-top:8px; padding-top:12px; border-top:1px solid var(--stone);
  font-size:19px; font-weight:700; color:var(--deep-sea);
}

/* Odeme formu */
.pay-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.pay-form label{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:200px; }
.pay-form label span{ font-size:13px; color:#77858f; }

.pay-form input{
  padding:12px 14px; font:inherit; font-size:15px;
  border:1px solid var(--stone); border-radius:7px; background:#fff; color:var(--deep-sea);
}

.pay-form input:focus{ outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(45,120,160,.15); }

/* Banka hesaplari */
.pay-banks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }

.pay-bank{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px; background:#f4f7f9; border-radius:9px;
  font-size:14px; color:#4a5b66;
}

.pay-bank strong{ color:var(--deep-sea); }

.pay-bank code{
  margin-top:4px; font-size:14px; letter-spacing:.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--deep-sea);
  word-break:break-all;
}

/* Bildirim seridi */
.pay-note{
  padding:14px 18px; margin-bottom:18px;
  border-radius:9px; font-size:14px; line-height:1.55;
}

.pay-note.ok{ background:#e8f4ec; border:1px solid #b9ddc6; color:#215c3c; }
.pay-note.fail{ background:#fbecea; border:1px solid #f0c4bd; color:#8f2f21; }

@media (max-width:640px){
  .pay-card{ padding:20px 18px; }
  .pay-form label{ min-width:100%; }
}

/* --- Odeme yontemi basligi ve kart markalari --- */
.pay-method-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}

.pay-method-head .pay-title{ margin:0; }

.pay-brands{ display:flex; gap:6px; }

.pay-brands span{
  padding:4px 9px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#5c6b76; background:#f0f4f6; border:1px solid var(--stone); border-radius:4px;
}

/* --- Tutar secim kartlari --- */
.pay-choice{ display:flex; flex-direction:column; gap:10px; }

.pay-opt{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; cursor:pointer;
  border:1px solid var(--stone); border-radius:9px;
  transition:border-color .15s, background .15s;
}

.pay-opt:hover{ border-color:var(--sea); }

.pay-opt input{ margin-top:3px; accent-color:var(--deep-sea); width:18px; height:18px; flex:0 0 auto; }

.pay-opt:has(input:checked){ border-color:var(--deep-sea); background:#f4f7f9; }

.pay-opt-body{ display:flex; flex-direction:column; gap:2px; }
.pay-opt-body .t{ font-size:15px; font-weight:600; color:var(--deep-sea); }
.pay-opt-body .d{ font-size:13px; color:#77858f; }

.pay-custom{ padding:4px 2px 0; }
.pay-custom[hidden]{ display:none; }
.pay-custom label{ display:flex; flex-direction:column; gap:6px; max-width:260px; }
.pay-custom label span{ font-size:13px; color:#77858f; }

.pay-custom input{
  padding:12px 14px; font:inherit; font-size:15px;
  border:1px solid var(--stone); border-radius:7px; background:#fff; color:var(--deep-sea);
}

.pay-custom input:focus{ outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(45,120,160,.15); }
.pay-custom small{ display:block; margin-top:6px; font-size:12px; color:#8b98a2; }

.pay-submit{ align-self:flex-start; margin-top:4px; }

.pay-secure{
  margin:16px 0 0; padding-top:14px; border-top:1px solid #eef1f3;
  font-size:12.5px; line-height:1.6; color:#8b98a2;
}

/* --- IBAN satiri --- */
.pay-bank .branch{ font-size:13px; color:#8b98a2; }

.pay-iban{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.pay-iban code{ margin:0; }

.pay-copy{
  padding:5px 11px; font:inherit; font-size:12px; font-weight:600;
  color:var(--deep-sea); background:#fff;
  border:1px solid var(--stone); border-radius:5px; cursor:pointer;
  transition:border-color .15s, color .15s;
}

.pay-copy:hover{ border-color:var(--sea); }
.pay-copy.is-done{ color:#215c3c; border-color:#b9ddc6; background:#e8f4ec; }

/* =====================================================================
   HEADER RENK MODLARI
   ---------------------------------------------------------------------
   Header sabittir ve sayfanin en ustunde SEFFAFTIR. Arkasindaki zemin
   sayfaya gore degistigi icin baglanti rengi de degismelidir:

     .over-hero -> arkasinda koyu hero var (ana sayfa)  -> acik renk yazi
     .on-light  -> sayfa acik zeminle basliyor           -> KOYU yazi

   Asagi kaydirildiginda header koyulasir; her iki modda da yazilar
   sayfanin ust kismindaki krem tonuna (--sand) doner.
   ===================================================================== */

/* --- Acik zeminli sayfalar: ustteyken koyu yazi --- */
header.site-header.on-light .brand,
header.site-header.on-light nav.links a,
header.site-header.on-light .phone-pill{
  color:var(--deep-sea);
}

header.site-header.on-light .brand .sub{ color:var(--sea); }

header.site-header.on-light nav.links a{ opacity:.78; }
header.site-header.on-light nav.links a:hover{ opacity:1; }

header.site-header.on-light .menu-toggle span{ background:var(--deep-sea); }

/* Ustteyken acik zemin uzerinde ince bir ayirici cizgi */
header.site-header.on-light{ border-bottom:1px solid rgba(15,46,59,.08); }
header.site-header.on-light.scrolled{ border-bottom-color:transparent; }

/* --- Asagi kaydirilinca (her iki mod): krem yazi --- */
header.site-header.scrolled .brand,
header.site-header.scrolled nav.links a,
header.site-header.scrolled .phone-pill{
  color:var(--sand);
}

header.site-header.scrolled .brand .sub{ color:var(--sea-light); }
header.site-header.scrolled .menu-toggle span{ background:var(--sand); }

/* Mobil menu her zaman koyu katman uzerinde acilir; orada krem yazi. */
@media (max-width:900px){
  header.site-header.on-light nav.links.mobile-open a{ color:var(--sand); opacity:1; }
}

/* =====================================================================
   KREDI KARTI ODEME EKRANI
   Kart alanlari PayTR'nin cercevesi icinde cizilir; buradaki stiller
   yalnizca o cerceveyi sayfaya oturtmak icindir.
   ===================================================================== */

/* Ne icin odendiginin ozeti */
.pay-summary{
  display:flex; flex-wrap:wrap; gap:20px 32px; align-items:flex-end;
  padding:20px 24px;
}

.pay-summary .lbl{
  display:block; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#8b98a2; margin-bottom:4px;
}

.pay-summary .val{ display:block; font-size:15px; font-weight:600; color:var(--deep-sea); }
.pay-summary .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.pay-summary-amount{ margin-left:auto; text-align:right; }
.pay-summary-amount .val{ font-size:22px; font-family:'Fraunces',serif; }

/* Cerceve karti */
.pay-frame-card{ padding:0; overflow:hidden; }

.pay-frame-head{
  display:flex; align-items:center; gap:8px;
  padding:12px 20px;
  background:#f4f7f9; border-bottom:1px solid var(--stone);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#4a5b66;
}

.pay-lock{ display:inline-flex; color:#2f7a52; }

.pay-frame-wrap{ position:relative; min-height:640px; }

.pay-frame{ width:100%; min-height:640px; display:block; border:0; }

/* Yukleniyor / hata durumu — cercevenin USTUNDE durur */
.pay-frame-loading{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:60px 24px; background:#fff;
  font-size:14px; color:#77858f; text-align:center;
}

.pay-frame-loading[hidden]{ display:none; }
.pay-frame-loading.is-error{ color:#8f2f21; display:flex; line-height:1.6; }

.pay-spinner{
  width:16px; height:16px; flex:0 0 auto;
  border:2px solid var(--stone); border-top-color:var(--sea);
  border-radius:50%; animation:pay-spin .8s linear infinite;
}

@keyframes pay-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .pay-spinner{ animation:none; }
}

/* --- Kart odemesi kapaliyken: alanin var oldugu belli olsun --- */
.pay-off{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  padding:18px 20px;
  background:#f7f5f0; border:1px dashed var(--stone); border-radius:9px;
}

.pay-off-fields{ display:flex; flex-direction:column; gap:9px; flex:0 0 150px; }

.pay-off-line{ height:11px; border-radius:3px; background:var(--stone); opacity:.55; }
.pay-off-line.long{ width:100%; }
.pay-off-line.short{ width:52%; }

.pay-off .pay-desc{ flex:1; min-width:220px; }

@media (max-width:640px){
  .pay-summary-amount{ margin-left:0; text-align:left; }
  .pay-frame, .pay-frame-wrap{ min-height:560px; }
}

/* Hakkimizda gorseli: yuklendiginde renk gecisinin yerini alir */
.about-frame .about-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- TANITIM VIDEOSU (konum bolumu icinde) ---------- */
.prox-video{margin-top:64px;}
.pv-head{max-width:640px;margin:0 auto 22px;text-align:center;}
.pv-head h3{font-family:'Fraunces',serif;font-size:26px;font-weight:500;color:#FFFDF8;margin:0 0 8px;}
.pv-head p{font-size:15px;line-height:1.65;color:rgba(255,253,248,.72);margin:0;}

.pv-frame{
  display:block;width:100%;max-width:960px;margin:0 auto;aspect-ratio:16/9;
  border-radius:3px;overflow:hidden;background:#0d2531 center/cover no-repeat;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.65);
}
.pv-frame iframe{width:100%;height:100%;border:0;display:block;}
video.pv-frame{object-fit:cover;}

/* Kapak: tiklanana kadar yalnizca gorsel durur */
.pv-embed{position:relative;cursor:pointer;}
.pv-embed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,32,43,.15),rgba(9,32,43,.55));
  transition:background .3s ease;
}
.pv-embed:hover::after{background:linear-gradient(180deg,rgba(9,32,43,.05),rgba(9,32,43,.45));}
.pv-embed.is-playing{cursor:default;}
.pv-embed.is-playing::after{display:none;}

.pv-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:78px;height:78px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(226,162,60,.94);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.6);
  transition:transform .25s ease, background .25s ease;
}
.pv-play::before{
  content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #0d2531;
}
.pv-embed:hover .pv-play{transform:translate(-50%,-50%) scale(1.08);background:#E2A23C;}
.pv-play:focus-visible{outline:3px solid #FFFDF8;outline-offset:4px;}
.pv-embed.is-playing .pv-play{display:none;}

@media (max-width: 760px){
  .prox-video{margin-top:44px;}
  .pv-head h3{font-size:22px;}
  .pv-play{width:62px;height:62px;}
  .pv-play::before{border-width:11px 0 11px 17px;}
}

/* Havale bilgileri: alici adi ve IBAN ayni bicimde, etiketli */
.pay-holder{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.pay-holder code{ margin:0; }
.pay-label{
  flex:0 0 44px; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(28,43,54,.55); font-weight:600;
}

/* Footer yasal bolumu: sozlesme baglantilari ve ticaret unvani.
   Odeme kurulusu denetimi ve yasal zorunluluk geregi her sayfada
   gorunur olmalidir. */
.footer-legal {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 253, 248, .14);
    font-size: .82rem;
    opacity: .8;
}

.footer-legal-id {
    margin-top: 10px;
    font-size: .76rem;
    opacity: .55;
    line-height: 1.5;
}