/* ====== Özsuna Greenlife – Mobil Öncelikli CSS ====== */
:root{
  /* Renkler */
  --primary:#233B6E;
  --primary-600:#1B2E56;
  --bg:#ffffff;
  --text:#2A3A59;
  --muted:#6b7280;

  /* UI */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* Ölçüler */
  --container-pad: clamp(16px, 4vw, 5%);
  --section-y: clamp(40px, 7vw, 64px);
}

/* Reset & temel */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
img{max-width:100%;height:auto;display:block}

/* Tipografi: mobilde daha okunaklı, ekranda ölçekli */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text);
  font-size: clamp(14px, 1.2vw + 10px, 16px);
  line-height: 1.55;
}

/* Başlıklar serif ve ölçekli */
.section h2, .feature-row h3, .page-head h1, .sidebar h3{
  color:var(--primary);
  letter-spacing:.3px;
}
.section h2{ font-size: clamp(22px, 2.5vw + 14px, 32px); margin-bottom:12px; }
.feature-row h3{ font-size: clamp(18px, 2vw + 10px, 24px); }
.page-head h1{ font-size: clamp(20px, 2.4vw + 12px, 28px); text-transform:uppercase; letter-spacing:.6px; }

/* Link */
a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--primary-600); }

/* ====== Yerleşim ====== */
/* Masaüstünde 9/3 grid; mobilde tek kolon */
body{
  display:grid;
  grid-template-columns: 1fr;               /* mobile-first */
  min-height:100vh;
}
main{overflow-x:hidden}

/* Header */
.page-head{
  position:sticky; top:0; z-index:100;
  background:#fff; padding:12px var(--container-pad);
  border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.page-head img{ max-width: clamp(120px, 10vw + 80px, 140px); height:auto; }

/* Nav */
.site-nav ul{list-style:none;display:flex;gap:14px}
.site-nav a{color:var(--primary);text-decoration:none;font-weight:600}
.site-nav a:hover{color:var(--primary-600)}

/* Hamburger */
.menu-toggle{
  width:38px;height:38px;border-radius:10px;
  background:#ffffffee;border:1px solid rgba(35,59,110,.15);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);
}
.menu-toggle .bar{display:block;width:20px;height:2px;background:var(--primary);margin:3px 0;transition:.2s}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Bölümler */
.section{padding: var(--section-y) var(--container-pad); border-bottom:1px solid #f0f0f0}
.section p.lead{ font-size: clamp(15px, .6vw + 14px, 17px); line-height:1.8; color:var(--muted); }
.sub{ margin-top: 1.25rem; }

/* Gridler */
.grid-2{ display:grid; grid-template-columns:1fr; gap:20px; }
.card{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; background:#fff; }
.label { font-weight:600; color:#111; }
.value { color:#374151; }

/* Sidebar – mobile: altta; desktop: sağda fixed */
.sidebar{
  position:relative; width:100%; height:auto;
  background:#f8f9fc; padding:24px var(--container-pad);
  border-top:1px solid #eee;
  display:flex; flex-direction:column; gap:12px;
}
.sidebar h3{ font-size: clamp(18px, 1.2vw + 14px, 22px); margin-bottom:10px }

/* Form */
form{display:grid;gap:12px}
input,select,textarea,button{
  padding:12px; border:1px solid #d1d5db; border-radius:12px; font:inherit; width:100%;
}
textarea{min-height:75px}
button{
  background:var(--primary); color:#fff; border:0; font-weight:700; cursor:pointer; transition:.2s;
  padding:12px 16px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.10);
}
button:hover{ background:var(--primary-600) }
.contact-info a{ color:var(--primary); text-decoration:none }

/* Input states */
.sidebar form input:hover,
.sidebar form select:hover,
.sidebar form textarea:hover{ border-color:#c5cbd3 }
.sidebar form input:focus,
.sidebar form select:focus,
.sidebar form textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow: 0 0 0 3px rgba(35,59,110,.12);
}
.sidebar form input:invalid,
.sidebar form select:invalid,
.sidebar form textarea:invalid{ border-color:#e66 }

/* Select oku */
.sidebar form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 2.2rem) 0.5rem;
  background-size: 6px 6px, 6px 6px, 1px 2.2rem;
  background-repeat:no-repeat;
}

/* ====== Carousel ====== */
.carousel{ position:relative }
.carousel .viewport{ overflow:hidden; border-radius:var(--radius); margin:0 -8px; }
.carousel .track{ display:flex; gap:16px; transition:transform .45s ease; will-change:transform }
.carousel .slide{ padding:0 8px; flex:0 0 100% }
.plan-card{ text-align:center; }
.plan-card img{ width:100%; height:auto; border-radius:10px }

/* Per-view varyantları (desktop’a çıkarken büyür) */
.carousel[data-per-view="4"] .slide{ flex-basis:100% } /* mobile 1’li */
@media (min-width:640px){
  .carousel[data-per-view="4"] .slide{ flex-basis: calc((100% - 16px) / 2); } /* tablet 2’li */
}
@media (min-width:1024px){
  .carousel[data-per-view="4"] .slide{ flex-basis: calc((100% - 16px*3) / 4); } /* desktop 4’lü */
}

/* Kontroller */
.controls{ position:absolute; inset:auto 16px 16px auto; display:flex; gap:10px }
.ctrl{
  width:44px;height:44px;border-radius:10px;background:#ffffffee;
  border:1px solid rgba(35,59,110,.15); display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--shadow); color:var(--primary); font-size:22px; font-weight:900;
}
.ctrl:hover{ background:#fff; color:var(--primary-600) }

/* Slider hero oran */
#slider-main .slide{ aspect-ratio:16/9 }
@media (max-width:1024px){ #slider-main .slide{ aspect-ratio:4/3 } }

/* ====== Harita & Lokasyon ====== */
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:14px }
.map-wrap iframe{ width:100%; height:420px; border:0 }
@media (max-width:640px){ .map-wrap iframe{ height:360px } }

.map-lite{
  position:relative; height:420px; border-radius:var(--radius); box-shadow:var(--shadow);
  background:#eef2ff; overflow:hidden; display:grid; place-items:center
}
.map-load{
  background:#fff; border:1px solid rgba(35,59,110,.2); padding:10px 14px;
  border-radius:12px; cursor:pointer; color:var(--primary); font-weight:700; box-shadow:var(--shadow)
}

/* Route Buttons */
#route-buttons{ display:flex; justify-content:center; gap:20px; margin-top:14px; flex-wrap:wrap; padding: 0 var(--container-pad) }
.route-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; font-size:16px; font-weight:600;
  text-decoration:none; border-radius:12px; transition:all .3s ease; box-shadow:0 4px 10px rgba(0,0,0,0.08); cursor:pointer;
}
.route-btn img{ width:22px; height:22px }
.route-btn.google{ background: linear-gradient(135deg, #4285F4, #0F9D58); color:#fff }
.route-btn.google:hover{ background: linear-gradient(135deg, #357ae8, #0c7b43); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.15) }
.route-btn.yandex{ background: linear-gradient(135deg, #ff0000, #cc0000); color:#fff }
.route-btn.yandex:hover{ background: linear-gradient(135deg, #d40000, #a30000); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.15) }
@media (max-width:600px){ .route-btn{ width:100%; justify-content:center; font-size:15px } }

/* Lokasyon görseli (full width + modern) */
.lokasyon-image{ padding: 0 var(--container-pad); }
.lokasyon-image img{
  width:100%; height:auto; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.1)
}

/* ====== H4 yan ikonlar (outline / light) ====== */
.h4-icon{ display:flex; align-items:center; gap:12px; margin-bottom:12px; color: var(--primary) }
.h4-icon .icon{ width:30px;height:30px; flex:0 0 30px; opacity:.9 }
.h4-icon .icon svg{ width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* Büyük ikonlu başlık varyantı (istersen) */
.h-with-icon{
  --icon-size: clamp(40px, 3.6vw + 26px, 56px);
  --icon-color: currentColor;
  color: var(--primary);
  display:flex; align-items:center;
  position:relative; padding-left: calc(var(--icon-size) + 14px);
  min-height: var(--icon-size);
  line-height: 1.2;
}
.h-with-icon::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--icon-size); height:var(--icon-size);
  background-color: var(--icon-color);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
  opacity:.9;
}

/* ====== Katalog butonu (ortalı, modern) ====== */
.section-actions{ margin-top:18px; display:flex; justify-content:center; padding: 0 var(--container-pad) }
.btn{
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  --btn-bg-hover: #1565C0;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:14px; font-weight:600;
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--btn-bg-hover); transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.16) }
.btn:active{ transform:translateY(0) }
.btn--catalog{ border:1.5px solid color-mix(in srgb, var(--primary) 25%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.85)); color:var(--primary); backdrop-filter: blur(6px); }
.btn--catalog:hover{ box-shadow:0 10px 26px rgba(30,136,229,.18) }
.btn--catalog .ico{
  width:1.2em;height:1.2em; display:inline-block; background: currentColor;
  -webkit-mask: center/contain no-repeat;
          mask: center/contain no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 0v6h6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 0v6h6"/></svg>');
  transform: translateY(1px);
}

/* ====== Lightbox ====== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.open{display:flex}
.lightbox-content{max-width:90vw;max-height:90vh}
.lightbox-content img,.lightbox-content video{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:var(--shadow);outline:1px solid rgba(255,255,255,.08)}
.lightbox-close{
  position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:12px;
  background:#ffffffee;border:1px solid rgba(35,59,110,.15);cursor:pointer;font-size:22px;color:var(--primary);box-shadow:var(--shadow)
}

/* ====== Masaüstü genişliğe geçişler ====== */
@media (min-width:1025px){
  body{ grid-template-columns: 9fr 3fr; }
  .sidebar{
    position:fixed; right:0; top:0; width:28vw; max-width:480px; height:100vh;
    padding:32px; overflow-y:auto; box-shadow:-4px 0 16px rgba(0,0,0,.06);
  }
  main{ margin-right: clamp(320px, 28vw, 480px); }
  .page-head{ padding:16px var(--container-pad) }
  .menu-toggle{ display:none }
}
@media (max-width:1024px){
  .page-head{ flex-wrap:wrap }
  .site-nav{ position:relative; background:#fff; border-top:1px solid #eee; display:none; padding:12px 0; width:100%; order:2 }
  .site-nav.open{ display:block }
  .site-nav ul{ flex-direction:column; gap:10px }
}
/* ==== SAĞDA SABİT FORM (DESKTOP) + MOBİLDE ALTA ==== */
:root{
  --side-w: clamp(320px, 28vw, 440px);
  --header-h: 0px; /* header yüksekliği ~ */
}

/* Masaüstü: içerik solda, form sağda sabit */
@media (min-width:1025px){
  /* Tema body grid'i sorun çıkarıyorsa devre dışı bırak */
  body{ display:block !important; }

  /* Ana içerik: sağda form için yer bırak */
  main{
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px var(--container-pad);
    margin-right: var(--side-w) !important; /* sağdaki sabit sütun alanı */
  }

  /* Üst menü önde kalsın */
  .page-head{ position: sticky; top:0; z-index: 2000; }

  /* Sidebar: sağda sabit */
  aside.sidebar{
    position: fixed !important;
    right: 0; 
    top: var(--header-h);
    width: var(--side-w) !important;
    height: calc(100vh - var(--header-h)) !important;
    overflow: auto;
    padding: 24px;
    background: #f8f9fc;
    box-shadow: -4px 0 16px rgba(0,0,0,.06);
  }
}

/* Mobil & tablet: tek kolon, form altta */
@media (max-width:1024px){
  main{ margin-right: 0 !important; }
  aside.sidebar{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    box-shadow: none !important;
    padding: 24px var(--container-pad) !important;
  }
}

/* İçerik bölümlerini ortala (isteğe bağlı) */
.page-head, .section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* === Masaüstünde main daha geniş, form (sidebar) daha dar === */
@media (min-width: 1024px) {

  /* Form alanı (sağdaki aside) – daha dar */
  .sidebar {
    width: 320px;              /* önceki 360–400 civarıysa küçülmüş olur */
  }

  /* İçerik alanı – daha geniş */
  main {
    max-width: 1200px;         /* içerik genişlesin */
    margin-right: 360px;       /* sağda sidebar için boşluk bırak */
  }
}
/* === LAYOUT AYARLARI === */
@media (min-width: 1024px) {
  /* Form (aside) daraltıldı */
  .sidebar {
    width: 300px;              /* eski hali muhtemelen 360–400px idi */
  }

  /* Main alanı genişletildi */
  main {
    max-width: none;           /* genişlik sınırlamasını kaldır */
    width: calc(100% - 300px); /* sidebar’ı hesaba katarak tam dolsun */
    margin-right: 300px;       /* form için sağ boşluk bırak */
    padding: 0;                /* iç padding’i kaldır */
  }
}

/* === SLIDER boşluklarını azalt === */
#slider.section {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Görselin üst/alt boşluğu azaltıldı */
#slider-main .slide img {
  border-radius: 8px;
  height: clamp(260px, 40vh, 520px); /* biraz daha dengeli */
}
/* ==== MacBook Air (orta boy desktop) optimizasyonu ==== */
/* 13" ve 15" MacBook Air için tipik genişlik: 1200–1500px arası */
@media screen and (min-width: 1200px) and (max-width: 1500px) {

  /* Sağ sabit form biraz dar, içerik daha geniş */
  :root{
    --side-w: 280px; /* önceki 300–320 yerine, MacBook Air'de biraz daha rahat */
  }

  main{
    /* Tüm genişliği kullan ama sağda sabit form için boşluk bırak */
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: var(--side-w);  /* sağdaki aside kadar boşluk */
    padding: 16px var(--container-pad);
  }

  /* Üst bar ve bölümleri aynı genişlikte hizala */
  .page-head,
  .section{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sidebar (form alanı) – MacBook’ta daha kompakt dursun */
  aside.sidebar{
    width: var(--side-w);
    padding: 20px;
    font-size: 0.95rem; /* azıcık küçültülmüş metin */
  }

  /* Slider biraz daha alçak dursun, ekranı fazla kaplamasın */
  #slider-main .slide{
    aspect-ratio: 16 / 8;
  }
}
.contact-info {
    font-size: 14px;
}input, select, textarea, button {
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font: inherit;
    width: 100%;
    font-size: 14px;
}