@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');
:root{
  /* Brand */
  --sand:#E3DAC9;        /* ana renk */
  --sand-dark:#CFC3AB;   /* koyu tonu */
  --ink:#141A1D;         /* metin */
  --muted:#4C5A60;       /* ikincil metin */
  --deep:#0B2F3A;        /* koyu deniz */
  --deep2:#124B5B;       /* vurgu */
  --glass: rgba(255,255,255,.55);
  --line: rgba(20,26,29,.12);
  --shadow: 0 22px 70px rgba(20,26,29,.16);
  --r: 22px;
  --max: 1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(18,75,91,.10), transparent 60%),
    linear-gradient(#fff, var(--sand));
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ===== Header (premium minimal) ===== */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(227,218,201,.70);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20,26,29,.10);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand .mark{
  width:44px;height:44px;border-radius:18px;
  background: linear-gradient(135deg, var(--deep), var(--deep2));
  box-shadow: 0 14px 34px rgba(11,47,58,.22);
  position:relative;
}
.brand .mark:after{
  content:"";
  position:absolute; inset:12px;
  border-radius:14px;
  border:1.8px solid rgba(255,255,255,.75);
  transform: rotate(10deg);
}
.brand .name{
  display:flex; flex-direction:column; line-height:1.1;
}
.brand .name strong{
  font-family: "Cormorant Garamond", serif;
  font-size:22px; letter-spacing:.2px;
}
.brand .name span{
  font-size:12px; color: rgba(20,26,29,.65); letter-spacing:.16em;
  text-transform:uppercase;
}

.navlinks{display:flex; align-items:center; gap:14px}
.navlinks a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(20,26,29,.78);
  padding:10px 6px;
  border-radius:12px;
  position:relative;
}
.navlinks a:hover{
  background: transparent;
}
.navlinks a:after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:6px;
  height:1px;
  background: rgba(20,26,29,.35);
  transform: scaleX(0);
  transform-origin:center;
  transition: 180ms ease;
}
.navlinks a:hover:after{
  transform: scaleX(1);
}
.navlinks a:hover{ background: rgba(255,255,255,.45); }

.actions{display:flex; align-items:center; gap:10px}

/* Lang switch (very clean) */
.lang{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(20,26,29,.12);
}

.lang button{
  border:0;
  background:transparent;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  color: rgba(20,26,29,.70);
  transition: 160ms ease;
}

.lang button:hover{
  background: rgba(227,218,201,.7);
}

.lang button.active{
  background: rgba(227,218,201,.95);
  color: rgba(20,26,29,.95);
}
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:16px;
  font-weight:800;
  border:1px solid rgba(20,26,29,.18);
  background: rgba(227,218,201,.78);
  color: rgba(20,26,29,.92);
  box-shadow: 0 10px 28px rgba(20,26,29,.10);
  transition: 160ms ease;
}
.btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.btn-primary{
  /* primary artık koyu değil: aynı sade stil */
  border:1px solid rgba(20,26,29,.22);
  background: rgba(227,218,201,.86);
  color: rgba(20,26,29,.92);
  box-shadow: 0 12px 34px rgba(20,26,29,.12);
}
/* image track */
.track{
  position:absolute;
  inset:0;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 700ms ease;
}

.slide.is-active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  transform: scale(1.08);
  transition: transform 6s ease;
}

.slide.is-active img{
  transform: scale(1.02);
}
/* overlay for chic look */
.hero-frame{
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(20,26,29,.10);
  background:#000;
  position:relative;

  /* Fotoğraflar artık her zaman aynı yükseklikte */
  height: clamp(520px, 58vw, 720px);
}

/* Center text (minimal, elegant) */
.hero-center{
  position:absolute; inset:0;
  z-index:3;
  display:flex; align-items:flex-end; justify-content:center;
  padding:28px;
}
.hero-card{
  width:min(820px, 100%);
  padding:24px 26px 20px;
  border-radius:24px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  border:1px solid rgba(20,26,29,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-card .eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(20,26,29,.62);
  margin: 0 0 10px;
}
.hero-card h1{
  margin: 0 0 10px;
  font-family:"Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
}

.hero-card .sub{
  margin: 0 auto 18px;
  max-width: 56ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(20,26,29,.78);
}
.hero-card .cta-wrap{
  display:flex;
  justify-content:center;
  margin-top: 6px;
}
.hero-card .btn-primary{
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.hero-card .btn-primary:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
/* luxury detail line */
.hero-card:before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, rgba(227,218,201,0), rgba(227,218,201,1), rgba(227,218,201,0));
  opacity:.95;
}
/* Premium hero typography */
.hero-card .eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(20,26,29,.62);
  margin: 0 0 10px;
}

.hero-card h1{
  margin: 0 0 10px;
  font-family:"Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: .2px;
}
.about-hero h1{
font-family: "Cormorant Garamond", serif;
font-size:36px;
font-weight:500;
line-height:1.4;
letter-spacing:.2px;
}
.about-section h2{
font-family: "Cormorant Garamond", serif;
font-size:26px;
margin-bottom:14px;
}
html[dir="rtl"] .about-page{
direction:rtl;
text-align:right;
margin:auto;
}

.hero-card .sub{
  margin: 0 auto 18px;
  max-width: 56ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(20,26,29,.78);
}

.hero-card .cta-wrap{
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

/* Button: even more chic */
.hero-card .btn-primary{
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-card h1{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  font-size:clamp(28px,3vw,42px);
  line-height:1.2;
  letter-spacing:0.3px;
}
.hero-card p{
  margin:0 0 14px;
  font-size: 13.5px;
  color: rgba(20,26,29,.82);
  letter-spacing:.02em;
}

/* Arrows (thin, luxury) */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:46px; height:46px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.28);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: 160ms ease;
}
.arrow:hover{ background: rgba(0,0,0,.42) }
.arrow.prev{ left:16px }
.arrow.next{ right:16px }
.arrow svg{ width:22px; height:22px }

/* Dots (small + elegant) */
.dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex; gap:8px;
}
.dot{
  width:9px;height:9px;border-radius:99px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
}
.dot.active{ background: rgba(227,218,201,.95) }

/* ===== Below sections (super clean) ===== */
.section{
  padding:26px 0 44px;
}
.section .title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.section h2{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:32px;
}
.section .lead{
  margin:0;
  color: rgba(20,26,29,.70);
  font-size:14px;
  max-width:52ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.tile{
  background: rgba(255,255,255,.55);
  border:1px solid rgba(20,26,29,.10);
  border-radius: var(--r);
  padding:18px;
  box-shadow: 0 14px 34px rgba(20,26,29,.10);
}
.tile .k{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(20,26,29,.68);
}
.tile h3{
  font-family:"Cormorant Garamond", serif;
  margin:10px 0 6px;
  font-size:22px;
}
.tile p{
  margin:0;
  color: var(--muted);
  line-height:1.7;
  font-size:14px;
}

/* Footer */
.footer{
  border-top:1px solid rgba(20,26,29,.10);
  background: rgba(227,218,201,.72);
  padding:18px 0;
  color: rgba(20,26,29,.75);
  font-size:13px;
}

/* ===== Contact split + bottom-up reveal ===== */
.contact-page{
  padding: 20px 0 34px;
}

.contact-split{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items: stretch;
}

.contact-panel{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(20,26,29,.10);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.55);
}

.contact-left{
  padding: 22px;
  background: rgba(255,255,255,.70);
}

.contact-right{
  background: #fff;
  border-left: 1px solid rgba(20,26,29,.10);
}

.contact-head{
  margin-bottom: 14px;
}

.contact-title{
  font-family:"Cormorant Garamond", serif;
  font-size: 34px;
  margin: 0 0 6px;
}

.contact-lead{
  margin: 0;
  color: rgba(20,26,29,.72);
  line-height: 1.7;
  font-size: 14px;
}

/* items */
.info-list{
  display:grid;
  gap:10px;
  margin: 14px 0 0;
  padding: 0;
  list-style:none;
}

.info-link{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(20,26,29,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 26px rgba(20,26,29,.08);
  transition: 180ms ease;
  cursor: pointer;
}

.info-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(20,26,29,.12);
}

.info-icon{
  width:44px;
  height:44px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(18,75,91,.10);
  color: rgba(18,75,91,.95);
  flex: 0 0 auto;
}

.info-text strong{
  display:block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,26,29,.62);
  margin-bottom: 4px;
}

.info-text span{
  display:block;
  color: rgba(20,26,29,.92);
  font-weight: 600;
}

/* bottom-up reveal animation */
.reveal-up{
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp 650ms cubic-bezier(.2,.9,.2,1) forwards;
}
.reveal-up.delay-1{ animation-delay: 80ms; }
.reveal-up.delay-2{ animation-delay: 160ms; }
.reveal-up.delay-3{ animation-delay: 240ms; }
.reveal-up.delay-4{ animation-delay: 320ms; }

@keyframes revealUp{
  to { opacity: 1; transform: translateY(0); }
}

/* map */
.map-embed{
  width:100%;
  height:100%;
  min-height: 520px;
  border:0;
  display:block;
}

@media (max-width: 920px){
  .contact-split{ grid-template-columns: 1fr; }
  .contact-right{ border-left:0; border-top: 1px solid rgba(20,26,29,.10); }
  .map-embed{ min-height: 420px; }
}

/* Contact page: keep map + info aligned in RTL */
.contact-split{
  grid-template-areas: "info map";
}
.contact-left{ grid-area: info; }
.contact-right{ grid-area: map; }

/* In Arabic (rtl), put info on the RIGHT, map on the LEFT */
.rtl .contact-split{
  grid-template-areas: "map info";
}

/* ===== Arabic typography ===== */
.rtl{
  font-family: "Cairo", "Noto Kufi Arabic", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.rtl .contact-title{
  font-family: "Noto Kufi Arabic", "Cairo", serif;
  letter-spacing: 0;
}

.rtl .navlinks a,
.rtl .lang button{
  letter-spacing: .06em;
}

/* ===== RTL contact items alignment (icons tidy) ===== */
.rtl .info-link{
  flex-direction: row-reverse;
  text-align: right;
}

.rtl .info-text{
  text-align: right;
}

.rtl .info-icon{
  margin-left: 0;
  margin-right: 0;
}

/* Optional: keep spacing consistent */
.rtl .info-link{
  justify-content: flex-start;
}
.rtl .info-link{ flex-direction: row !important; }
.rtl .info-text{ text-align: right; }
/* Arabic font */
.rtl{
  font-family: "Cairo","Noto Kufi Arabic", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Arabic headings */
.rtl .contact-title{
  font-family: "Noto Kufi Arabic","Cairo", serif;
  letter-spacing: 0;
}

/* Keep icons LEFT in all languages */
.rtl .info-link{
  flex-direction: row;
}

/* Arabic text alignment */
.rtl .info-text{
  text-align: right;
}
/* Keep icons on the LEFT in all languages */
.info-link{
  display:flex;
  flex-direction: row;
  align-items: center;
}

/* Arabic page text alignment */
.rtl .info-text{
  text-align: right;
}

/* Prevent RTL from flipping layout */
.rtl .info-link{
  direction: ltr;
}

.rtl .info-text{
  direction: rtl;
}

/* Contact icon hover effect */
.info-link{
  transition: all .25s ease;
}

.info-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(20,26,29,.15);
}

.info-link:hover .info-icon{
  background: rgba(18,75,91,.18);
  color: #124b5b;
  transform: scale(1.08);
}

.info-icon{
  transition: all .25s ease;
}

/* Fix mixed RTL/LTR text (phone numbers, emails) */
.ltr{
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.logo{
  height:60px;
  width:auto;
  display:block;
}

/* navbar logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.logo{
  height:99px;
  width:auto;
  display:block;
}

/* Arabic header fix */
html[dir="rtl"] .topbar{
  display:flex;
  align-items:center;
}

html[dir="rtl"] .brand{
  direction:ltr;
}

html[dir="rtl"] .actions{
  margin-left:auto;
}

/* Arabic layout fix */
html[dir="rtl"] .topbar{
  display:flex;
  align-items:center;
}

html[dir="rtl"] .brand{
  direction:ltr;
}

html[dir="rtl"] .navlinks{
  margin:0 auto;
}

html[dir="rtl"] .actions{
  margin-left:auto;
}

.section-title{
margin-top:40px;
margin-bottom:30px;
}

.section-title h1{
font-family:"Cormorant Garamond", serif;
font-size:42px;
font-weight:500;
margin-bottom:10px;
}

.section-title p{
max-width:600px;
font-size:15px;
opacity:.8;
line-height:1.6;
}


.services-list{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:60px;
}


.service-card{
background:rgba(255,255,255,.6);
border:1px solid rgba(20,26,29,.1);
border-radius:22px;
padding:22px;

text-decoration:none;
color:inherit;

backdrop-filter:blur(12px);

transition:all .2s ease;
}

.service-card:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,0,0,.08);
}


.service-card h2{
font-family:"Cormorant Garamond", serif;
font-weight:500;
font-size:26px;
margin-bottom:6px;
}

.service-card p{
font-size:14px;
line-height:1.7;
opacity:.8;
}
/* ===== Hizmetler (premium) ===== */

.section-title{
  margin-top: 42px;
  margin-bottom: 22px;
}

.section-title h1{
  font-family:"Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: .2px;
}

.section-title p{
  max-width: 680px;
  font-size: 15px;
  opacity: .82;
  line-height: 1.65;
  margin: 0;
}

/* subtle scroll hint on right */
.scroll-hint{
  position: fixed;
  right: 18px;
  top: 120px;
  width: 10px;
  height: 120px;
  border-radius: 999px;
  background: rgba(20,26,29,.08);
  border: 1px solid rgba(20,26,29,.10);
  overflow: hidden;
  z-index: 5;
}
.scroll-hint span{
  display:block;
  width:100%;
  height:40%;
  background: linear-gradient(180deg, rgba(18,75,91,.0), rgba(18,75,91,.25), rgba(18,75,91,.0));
  animation: scrollHint 1.6s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{ transform: translateY(-60%); opacity:.2; }
  50%{ opacity:1; }
  100%{ transform: translateY(160%); opacity:.2; }
}

/* list layout */
.services-list{
  display:flex;
  flex-direction:column;
  gap: 18px;
  margin: 22px 0 70px;
}

/* card */
.service-card{
  position:relative;
  display:block;
  text-decoration:none;
  color: inherit;

  background: rgba(255,255,255,.60);
  border: 1px solid rgba(20,26,29,.10);
  border-radius: 24px;
  padding: 22px;

  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(20,26,29,.08);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  overflow:hidden;
}

/* light sweep */
.service-card::before{
  content:"";
  position:absolute;
  inset:-60px -120px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(227,218,201,.55), rgba(227,218,201,0) 70%);
  transform: rotate(12deg);
  opacity:.65;
  pointer-events:none;
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(20,26,29,.12);
  background: rgba(255,255,255,.72);
}

.service-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 8px;
}

.service-icon{
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(18,75,91,.10);
  border: 1px solid rgba(18,75,91,.18);
  color: rgba(18,75,91,.95);
  flex: 0 0 auto;
}

.service-icon svg{
  width: 22px;
  height: 22px;
}

.service-card h2{
  font-family:"Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 28px;
  margin: 0;
}

.service-card p{
  font-size: 14px;
  line-height: 1.75;
  opacity: .82;
  margin: 0;
  max-width: 86ch;
}

.service-cta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,26,29,.70);
}

.arrow-mini{
  display:inline-block;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.service-card:hover .arrow-mini{
  transform: translate(3px, -1px);
}

/* reveal animation */
.reveal-up{
  opacity: 0;
  transform: translateY(18px);
}
.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s cubic-bezier(.2,.9,.2,1), transform .55s cubic-bezier(.2,.9,.2,1);
}
.reveal-up.delay-1.is-visible{ transition-delay: .08s; }
.reveal-up.delay-2.is-visible{ transition-delay: .16s; }

/* mobile */
@media (max-width: 920px){
  .scroll-hint{ display:none; }
  .section-title h1{ font-size: 36px; }
  .service-card h2{ font-size: 26px; }
}
/* ===== Header layout: always Brand LEFT, Menu CENTER, Lang RIGHT ===== */
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{ order:1; }

.navlinks{
  order:2;
  margin-inline: auto;   /* center */
}

.actions{
  order:3;
  margin-inline-start: auto; /* pushblip to far right */
}

/* Arabic page: keep page RTL, but header layout stable */
html[dir="rtl"] header{
  direction:ltr;          /* header flow LTR so brand stays left */
}
html[dir="rtl"] header .navlinks{
  direction:rtl;          /* menu text reads RTL */
}
/* ===== FIX HEADER LAYOUT (ALL PAGES) ===== */
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
}

/* brand always left */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction:row;   /* logo solda */
  direction:ltr;        /* RTL sayfada bile ters dönmesin */
}

/* menu always center */
.navlinks{
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}

/* language always right */
.actions{
  margin-left:auto;
}

/* FIX: Arabic pages header layout */

.rtl header{
direction:ltr;
}

.rtl .topbar{
direction:ltr;
display:flex;
align-items:center;
}

.rtl .navlinks{
direction:rtl;
}

.rtl .brand{
direction:ltr;
}

.rtl .actions{
margin-left:auto;
}
/* ===== FIX RTL HEADER (force LTR header only) ===== */

/* Header her zaman LTR kalsın */
.rtl header,
.rtl header *{
  direction: ltr !important;
}

/* Üst bar düzeni: logo solda, menü ortada, dil sağda */
.rtl .topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-direction:row !important; /* row-reverse'ü ezer */
}

/* Sıralama */
.rtl .brand{ order:1 !important; }
.rtl .navlinks{ order:2 !important; }
.rtl .actions{ order:3 !important; }

/* Menü linkleri Arapça yazı için RTL kalsın ama konum ortada */
.rtl .navlinks{
  direction: rtl !important;
  margin: 0 auto !important;
  justify-content:center !important;
}

/* Dil butonları sağda kalsın */
.rtl .actions{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ================================
   FIX: Arabic RTL text, NO MIRROR LAYOUT
   Header layout stays LTR
================================ */

/* Body RTL kalsın (Arapça metin için) */
.rtl { direction: rtl; }

/* ---- HEADER: her dilde aynı kalsın (ayna olmasın) ---- */
.rtl header,
.rtl header *{
  direction: ltr !important; /* header’ı LTR’a kilitle */
}

.rtl .topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-direction:row !important; /* row-reverse'i ezer */
}

/* sıralama: logo - menü - diller */
.rtl .brand{ order:1 !important; }
.rtl .navlinks{ order:2 !important; }
.rtl .actions{ order:3 !important; }

/* menü ortada kalsın, ama arapça yazı RTL olsun */
.rtl .navlinks{
  margin: 0 auto !important;
  justify-content:center !important;
  direction: rtl !important;         /* sadece yazı yönü RTL */
}
.rtl .navlinks a{
  direction: rtl !important;
  unicode-bidi: plaintext !important; /* arapça satır düzeni düzgün */
}

/* ---- SERVICES: kartlar/ikonlar aynalanmasın ---- */
/* hizmetler listesinin genel yerleşimi LTR kalsın */
.rtl .services,
.rtl .services-list,
.rtl .services-grid{
  direction: ltr !important;
}

/* kart içindeki yazı RTL olsun ama ikon solda kalsın */
.rtl .service-card{
  direction: rtl !important;     /* yazı yönü RTL */
  text-align: right !important;  /* metin sağa yaslı */
  display:flex !important;
  flex-direction: row !important; /* ikon solda, metin sağda (TR ile aynı) */
  gap: 12px !important;
  align-items:flex-start !important;
}

/* ikon kutusu sabit solda dursun */
.rtl .service-icon{
  flex: 0 0 auto !important;
}

/* eğer kart içinde başlık+metin sarmalayıcı varsa */
.rtl .service-content{
  flex: 1 1 auto !important;
}
/* ===== RTL FIX (AR pages) ===== */
body.rtl { direction: rtl; }

/* Header: TR ile aynı düzen (logo solda, menü ortada, dil sağda) */
body.rtl .topbar{
  direction: ltr;              /* layout yönünü sabit tut */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.rtl .brand,
body.rtl .navlinks,
body.rtl .actions{
  direction: ltr;              /* container layout LTR kalsın */
}

/* Metinler Arapça gibi dursun */
body.rtl .brand-text,
body.rtl .navlinks a{
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Logo ASLA ters dönmesin */
body.rtl .logo{
  transform: none !important;
}

/* Nav linklerin sırası TR ile aynı kalsın (HTML sırası neyse o) */
body.rtl .navlinks{
  display: flex;
  gap: 22px;
  justify-content: center;
}

/* ===== Services cards: ikon sağda, metin RTL (aynalanma yok) ===== */
body.rtl .service-card{
  direction: ltr;              /* kartın layout’u aynalanmasın */
}

body.rtl .service-head,
body.rtl .service-cta{
  direction: ltr;
}

body.rtl .service-head h2,
body.rtl .service-card p,
body.rtl .service-cta span{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* İkon sağda kalsın */
body.rtl .service-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.rtl .service-icon{
  margin-left: 0;
  margin-right: 12px; /* gerekiyorsa */
  transform: none !important;
}

body.rtl .service-icon svg{
  transform: none !important;
}

/* ok/arrow ters dönmesin (varsa) */
body.rtl .arrow-mini{
  transform: none !important;
}
/* ==========================
   ARABIC FIX (menu order + services alignment)
   Paste THIS at the VERY END of styles.css
========================== */

/* --- MENU: order same as TR (no mirroring) --- */
html[dir="rtl"] .topbar{ direction:ltr; }                /* header layout LTR */
html[dir="rtl"] .navlinks{
  direction:ltr !important;                              /* items left->right */
  justify-content:center;
  margin: 0 auto;
}
html[dir="rtl"] .navlinks a{
  direction: rtl;                                        /* Arabic text RTL */
  unicode-bidi: plaintext;
}

/* --- SERVICES: keep icon/heading layout like TR --- */
html[dir="rtl"] .service-card{ text-align:right; }       /* text right */

html[dir="rtl"] .service-head{
  direction:ltr !important;                              /* layout LTR */
  flex-direction: row !important;                        /* icon left */
  justify-content:flex-start !important;
  gap:12px !important;
}

html[dir="rtl"] .service-icon{
  order:0 !important;
  margin:0 12px 0 0 !important;                          /* spacing */
}

html[dir="rtl"] .service-head h2{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align:right;
}

/* CTA line stays nice in Arabic */
html[dir="rtl"] .service-cta{
  direction: rtl;
  justify-content:flex-start;
}
/* ===== AR NAV FIX (paste at very end) ===== */

/* Header layout always LTR so it doesn't mirror */
html[dir="rtl"] header { direction: ltr !important; }

/* Nav items order stays as written in HTML (left->right) */
html[dir="rtl"] header .navlinks{
  direction: ltr !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* But each link text remains Arabic RTL */
html[dir="rtl"] header .navlinks a{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}

/* Keep language switch on the far right */
html[dir="rtl"] header .actions{
  margin-left: auto !important;
  direction: ltr !important;
}
/* ===== AR SERVICES HEAD FIX ===== */
html[dir="rtl"] .service-head{
  direction: ltr !important;
  justify-content: flex-start !important;
  flex-direction: row !important;   /* icon left */
  gap: 12px !important;
}
html[dir="rtl"] .service-card{ text-align: right; }
html[dir="rtl"] .service-head h2{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: right !important;
}
/* ===== ARABIC SERVICES FIX ===== */

html[dir="rtl"] .service-head{
  direction: ltr;              /* ikon solda kalsın */
  flex-direction: row;
  justify-content: flex-start;
}

html[dir="rtl"] .service-card{
  text-align: right;           /* metin sağa hizalı */
}

html[dir="rtl"] .service-head h2,
html[dir="rtl"] .service-card p{
  direction: rtl;              /* yazı Arapça gibi akmaya devam eder */
  unicode-bidi: plaintext;
}

/* ===== ARABIC SERVICES FINAL FIX ===== */

/* Services layout aynalanmasın */
html[dir="rtl"] .services-list{
  direction: ltr;
}

/* Kart layout TR ile aynı */
html[dir="rtl"] .service-card{
  direction: ltr;
}

/* Başlık ve metin Arapça gibi görünsün */
html[dir="rtl"] .service-card h2,
html[dir="rtl"] .service-card p{
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/* ikon solda kalsın */
html[dir="rtl"] .service-head{
  flex-direction: row;
}
/* =====================================================
   RTL SYSTEM (STABLE) — paste at VERY END of styles.css
   Goal:
   - Header layout stays LTR (logo left, menu center, lang right)
   - Arabic text is RTL (readable)
   - Services NOT mirrored (order like TR), only text RTL
   - Contact icons stay LEFT (like TR)
===================================================== */

/* 1) Arabic base */
html[dir="rtl"] body{
  direction: rtl;
  font-family: "Cairo","Noto Kufi Arabic", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 2) HEADER: lock layout LTR (never mirrored) */
html[dir="rtl"] header{ direction: ltr !important; }
html[dir="rtl"] .topbar{
  direction: ltr !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-direction:row !important;
}

/* brand left */
html[dir="rtl"] .brand{
  direction:ltr !important;
  flex-direction:row !important;
}
html[dir="rtl"] .logo{ transform:none !important; }

/* menu center, ORDER like HTML (no mirror) */
html[dir="rtl"] .navlinks{
  direction:ltr !important;          /* keeps order normal */
  margin:0 auto !important;
  justify-content:center !important;
  display:flex !important;
}
/* menu text arabic */
html[dir="rtl"] .navlinks a{
  direction:rtl !important;
  unicode-bidi: plaintext !important;
  text-transform:none;               /* Arabic uppercase yok */
}

/* lang right */
html[dir="rtl"] .actions{
  margin-left:auto !important;
  direction:ltr !important;
}

/* 3) SERVICES: keep layout normal, only text RTL */
html[dir="rtl"] .services-list{
  direction:ltr !important;          /* list order normal */
}
html[dir="rtl"] .service-card{
  direction:ltr !important;          /* card not mirrored */
}

/* heading row: icon left like TR */
html[dir="rtl"] .service-head{
  direction:ltr !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-direction:row !important;
  gap:12px !important;
}

/* Arabic text inside card */
html[dir="rtl"] .service-card h2,
html[dir="rtl"] .service-card p{
  direction:rtl !important;
  unicode-bidi: plaintext !important;
  text-align:right !important;
}

/* CTA line Arabic readable (but not mirrored) */
html[dir="rtl"] .service-cta{
  direction:rtl !important;
  justify-content:flex-start !important;
}

/* 4) CONTACT: icons stay LEFT like TR, text RTL */
html[dir="rtl"] .info-link{
  direction:ltr !important;          /* keeps icon left */
  flex-direction:row !important;     /* icon left */
}
html[dir="rtl"] .info-text{
  direction:rtl !important;
  unicode-bidi: plaintext !important;
  text-align:right !important;
}

/* 5) Prevent accidental mirroring if any old rule exists */
html[dir="rtl"] .logo,
html[dir="rtl"] .service-icon,
html[dir="rtl"] .service-icon svg,
html[dir="rtl"] .arrow-mini{
  transform:none !important;
}
/* ===== AR SERVICES: match box size + put CTA under text ===== */

/* Kartların ölçüsü/kalınlığı aynı kalsın */
html[dir="rtl"] .service-card{
  direction: ltr !important;      /* layout aynalanmasın */
  display: block !important;      /* flex olmasın (ince görünüm yapıyordu) */
  width: 100% !important;
}

/* Başlık satırı TR/EN ile aynı: ikon + başlık */
html[dir="rtl"] .service-head{
  justify-content: flex-start !important;
}

/* CTA kesinlikle alt satıra insin */
html[dir="rtl"] .service-cta{
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 14px !important;    /* altına boşluk */
  width: 100% !important;
}

/* Ok her zaman yazının yanında kalsın (ama blok alt satırda) */
html[dir="rtl"] .service-cta span{
  display: inline-block;
}
/* ABOUT SAYFASI TÜM DİLLER AYNI BOYUT */

.about-page{
max-width:900px;
margin:0 auto;
padding:60px 0 80px;
font-size:15px;
line-height:1.8;
}

/* üst slogan */
.about-hero h1{
font-family:"Cormorant Garamond", serif;
font-size:34px;
font-weight:500;
line-height:1.4;
margin-bottom:30px;
}

/* başlıklar */
.about-section h2{
font-family:"Cormorant Garamond", serif;
font-size:24px;
margin-bottom:12px;
}

/* metin */
.about-section p{
font-size:15px;
color:#333;
}

/* liste */
.about-list{
margin-top:12px;
padding-left:20px;
}

.about-list li{
font-size:15px;
margin-bottom:8px;
}

/* AR hizalama */
html[dir="rtl"] .about-page{
text-align:right;
direction:rtl;
}
/* ===== Yacht Slider (Teknemiz) ===== */
.yacht-section{
  padding: 20px 0 70px;
}

.yacht-head{
  margin: 18px 0 14px;
}

.yacht-head h2{
  margin: 0;
  font-family:"Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: .2px;
}

.yacht-slider{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(20,26,29,.10);
  box-shadow: var(--shadow);
  background: #000;
  height: clamp(360px, 42vw, 520px);
}

.yacht-track{
  position:absolute;
  inset:0;
}

.yacht-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 700ms ease;
}

.yacht-slide.is-active{
  opacity:1;
}

.yacht-slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  display:block;
  transform: scale(1.06);
  transition: transform 6s ease;
}

.yacht-slide.is-active img{
  transform: scale(1.02);
}

/* Arrows */
.yacht-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:5;
  width:46px;
  height:46px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.28);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: 160ms ease;
}

.yacht-arrow:hover{ background: rgba(0,0,0,.42); }
.yacht-arrow.prev{ left:16px; }
.yacht-arrow.next{ right:16px; }
.yacht-arrow svg{ width:22px; height:22px; }

/* Dots */
.yacht-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform: translateX(-50%);
  z-index:6;
  display:flex;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.yacht-dot{
  width:9px;
  height:9px;
  border-radius:99px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
}
.yacht-dot.active{ background: rgba(227,218,201,.95); }


/* desktop */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(20,26,29,.12);
  border-radius:14px;
  background:rgba(255,255,255,.55);
  box-shadow:0 8px 20px rgba(20,26,29,.08);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  z-index:120;
}

.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  border-radius:999px;
  transition:transform .25s ease, opacity .25s ease;
}

.brand-text{
  display:inline-block;
  line-height:1.15;
}
/* ===== SIMPLE MOBILE MENU FINAL FIX ===== */
@media (max-width: 900px){

  /* kill any old overlay rule */
  body.menu-open::before{
    content:none !important;
    display:none !important;
  }

  .menu-backdrop{
    display:none !important;
  }

  .topbar{
    display:grid !important;
    grid-template-columns:44px 1fr 44px;
    grid-template-areas:
      "menu brand ."
      ". lang .";
    align-items:center;
    gap:8px 12px;
    padding:12px 0 14px;
    position:relative;
  }

  .menu-toggle{
    display:flex !important;
    grid-area:menu;
    justify-self:start;
    align-self:start;
    position:relative;
    z-index:5001 !important;
  }

  .brand{
    grid-area:brand;
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    min-width:0;
    margin:0 auto;
    position:relative;
    z-index:5001;
  }

  .actions{
    grid-area:lang;
    margin:0 !important;
    justify-self:center;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:5001;
  }

  .logo{
    height:58px !important;
    width:auto;
    display:block;
  }

  .brand-text{
    font-size:18px;
    font-weight:600;
    text-align:center;
    line-height:1.15;
  }

  .lang{
    flex-wrap:wrap;
    justify-content:center;
  }

  .navlinks{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(82vw, 320px) !important;
    height:100vh !important;
    margin:0 !important;
    padding:96px 22px 24px !important;
    background:rgba(255,255,255,.98) !important;
    border-right:1px solid rgba(20,26,29,.10);
    box-shadow:20px 0 50px rgba(20,26,29,.12);
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:8px !important;
    transform:translateX(-105%) !important;
    transition:transform .28s ease !important;
    z-index:5000 !important;
    pointer-events:auto !important;
  }

  body.menu-open .navlinks{
    transform:translateX(0) !important;
  }

  .navlinks a{
    width:100% !important;
    display:block !important;
    font-size:14px;
    letter-spacing:.08em;
    text-transform:none;
    padding:12px 10px !important;
    border-radius:12px;
    pointer-events:auto !important;
  }

  body.menu-open .menu-toggle span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  body.menu-open .menu-toggle span:nth-child(2){
    opacity:0;
  }

  body.menu-open .menu-toggle span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
}

/* Arabic mobile stays visible */
@media (max-width: 900px){
  html[dir="rtl"] .brand{
    direction:rtl;
  }

  html[dir="rtl"] .brand-text{
    direction:rtl;
    text-align:center;
  }

  html[dir="rtl"] .navlinks{
    left:0 !important;
    right:auto !important;
    direction:rtl !important;
    align-items:stretch !important;
  }

  html[dir="rtl"] .navlinks a{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }
}