/* ==========================================================================
   Çiçekçi Yazılım — cicekciyazilim.com.tr
   Palet:  botanik yeşil + kurdele altını + yeşile çalan kağıt
   Tipo :  Nunito (başlık) / Inter (gövde)
   ========================================================================== */

/* ==========================================================================
   FONTLAR — self-host (Google Fonts'a dış istek yok)
   Kaynak: fonts.gstatic.com'dan indirilen woff2'ler, assets/fonts/ altında.
   latin + latin-ext ikisi de ŞART: ç ö ü latin'de, ğ Ğ ş Ş İ latin-ext'te.
   ========================================================================== */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:url("/assets/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:url("/assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Nunito";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/nunito-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/nunito-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* renk */
  --ink:      #142018;
  --ink-2:    #405146;
  --mute:     #5C6B60;
  --stem:     #1B5E3F;
  --stem-d:   #164C34;
  --moss:     #3D8B63;
  --ribbon:   #B8862B;
  --ribbon-l: #E9DBBE;
  --paper:    #F0F4ED;
  --paper-2:  #E7EDE3;
  --card:     #FFFFFF;
  --line:     #D8E1D5;
  --wa:       #128C4A;

  /* tipografi */
  --f-display: "Nunito", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --t-xs:  .78rem;
  --t-sm:  .90rem;
  --t-md:  1rem;
  --t-lg:  clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --t-h3:  clamp(1.08rem, 1rem + .4vw, 1.28rem);
  --t-h2:  clamp(1.62rem, 1.28rem + 1.42vw, 2.4rem);
  --t-h1:  clamp(1.9rem, 1.38rem + 2.05vw, 2.8rem);

  /* ölçü */
  --wrap: 1180px;
  --gut: clamp(18px, 4vw, 36px);
  --sec-y: clamp(64px, 8vw, 118px);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --shadow: 0 1px 2px rgba(20,32,24,.05), 0 8px 28px -12px rgba(20,32,24,.18);
  --shadow-lg: 0 2px 6px rgba(20,32,24,.06), 0 28px 60px -24px rgba(20,32,24,.30);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-md);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:var(--stem); text-decoration-color:color-mix(in srgb, var(--stem) 35%, transparent); text-underline-offset:3px; }
a:hover{ text-decoration-color:currentColor; }
/* Nunito: yuvarlak uçlu sans. Büyük x-yüksekliği sayesinde serifden daha iri
   görünür — punto bir tık düşük, tracking daha sıkı. Kalın ağırlık yumuşaklığı
   güce çeviriyor. */
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; line-height:1.2; letter-spacing:-.018em; }
h1{ font-weight:800; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,textarea{ font:inherit; color:inherit; }

:focus-visible{
  outline:2.5px solid var(--ribbon);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--stem); color:#fff; padding:10px 16px;
  border-radius:0 0 var(--r-sm) var(--r-sm); text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{ top:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ==========================================================================
   ORTAK PARÇALAR
   ========================================================================== */

/* Blok akış + inline çizgi: flex'te metin anonim bir öğe olup rastgele kırılıyordu.
   Böyle normal metin gibi sarar, çizgi ilk satırda kalır. */
.eyebrow{
  display:block;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
  text-wrap:balance;
  color:var(--ribbon);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:26px; height:1px;
  margin-right:12px;
  vertical-align:middle;
  background:var(--ribbon);
}

.lede{
  font-size:var(--t-lg);
  color:var(--ink-2);
  line-height:1.62;
}

/* butonlar */
.btn{
  --btn-bg:var(--stem);
  --btn-fg:#fff;
  --btn-bd:var(--stem);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px;
  border:1.5px solid var(--btn-bd);
  border-radius:100px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(20,32,24,.5); }
.btn:active{ transform:translateY(0); }

.btn-primary{ --btn-bg:var(--stem); --btn-fg:#fff; --btn-bd:var(--stem); }
.btn-primary:hover{ --btn-bg:var(--stem-d); --btn-bd:var(--stem-d); }

.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--stem); --btn-bd:var(--line); }
.btn-ghost:hover{ --btn-bd:var(--stem); --btn-bg:rgba(27,94,63,.05); }

.btn-wa{ --btn-bg:var(--wa); --btn-fg:#fff; --btn-bd:var(--wa); }
.btn-wa:hover{ --btn-bg:#0E7A3F; --btn-bd:#0E7A3F; }

.btn-sm{ padding:10px 18px; font-size:var(--t-xs); }
.btn-lg{ padding:17px 30px; font-size:var(--t-lg); }
.btn-block{ display:flex; width:100%; }

.ico-wa{ width:1.15em; height:1.15em; flex:none; }
.ico-arr{ width:1.15em; height:1.15em; flex:none; transition:transform .18s ease; }
.btn:hover .ico-arr{ transform:translateX(3px); }

/* bölüm başlığı */
.section{ padding-block:var(--sec-y); scroll-margin-top:84px; }
.section-tint{ background:var(--paper-2); }

.sec-head{ max-width:760px; margin-bottom:clamp(34px,4.5vw,56px); }
.sec-head h2{ font-size:var(--t-h2); }
.sec-sub{
  margin-top:16px;
  font-size:var(--t-lg);
  color:var(--mute);
  line-height:1.6;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.site-head.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--paper) 96%, transparent);
}
.head-in{
  display:flex; align-items:center; gap:18px;
  min-height:68px;
}

.brand{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--stem);
  text-decoration:none;
  flex:none;
}
.brand-mark{ width:27px; height:27px; flex:none; }
.brand-text{
  font-family:var(--f-display);
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  white-space:nowrap;
}
.brand-text em{ font-style:normal; font-weight:400; color:var(--stem); }

.nav{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  margin-left:auto;
}
.nav a{
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  padding:6px 0;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--ribbon);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.head-cta{ flex:none; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  margin-left:auto;
  padding:0;
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.8px;
  background:var(--ink); border-radius:2px;
  transition:transform .24s ease, opacity .18s ease;
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:19.5px; }
.nav-toggle span:nth-child(3){ top:25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding-block:clamp(46px,6vw,86px) clamp(56px,7vw,104px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:auto auto 0 50%;
  width:min(1400px,150vw); aspect-ratio:2/1;
  transform:translate(-50%,42%);
  background:radial-gradient(closest-side, rgba(61,139,99,.16), transparent 72%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,64px);
  align-items:center;
}
/* 41ch, gövde fontunun "0" genişliğine göre ~365px'e denk geliyordu; H1 o dar
   sütunda 6 satıra bölünüyordu. Sütun artık kolonu dolduruyor. */
.hero-copy{ max-width:min(100%, 560px); }
.hero h1{
  font-size:var(--t-h1);
  line-height:1.14;
  letter-spacing:-.026em;
  text-wrap:balance;
}
/* Altın vurgu: taban çizgisinin hemen altında ince bant. Nunito'nun x-yüksekliği
   serifden büyük, taban çizgisi satır kutusunda daha aşağıda — bant da indi. */
.hero h1 .hl{
  color:var(--stem);
  background-image:linear-gradient(
    transparent 76%,
    var(--ribbon-l) 76%,
    var(--ribbon-l) 93%,
    transparent 93%
  );
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero .lede{ margin-top:18px; }

/* kontenjan rozeti — değerler HTML'deki data-total / data-remaining'den gelir */
.quota{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  width:fit-content;
  max-width:min(100%,470px);
  margin-top:24px;
  padding:13px 18px 14px;
  background:linear-gradient(180deg,rgba(184,134,43,.10),rgba(184,134,43,.045));
  border:1px solid rgba(184,134,43,.30);
  border-radius:var(--r);
}
.quota-ico{
  flex:none;
  color:var(--ribbon);
}
.quota-ico svg{ width:26px; height:26px; display:block; }
.quota-main{
  flex:1 1 220px;
  min-width:0;
  display:grid;
  gap:9px;
}
.quota-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2px 16px;
}
.quota-label{
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--ink-2);
}
.quota-count{
  font-size:var(--t-xs);
  color:var(--mute);
  white-space:nowrap;
}
.quota-num{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.3rem;
  line-height:1;
  color:#8A6420;
  margin-left:3px;
  display:inline-block;
  min-width:2.1ch;      /* sayaç dönerken satır zıplamasın */
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.quota-bar{
  height:6px;
  border-radius:99px;
  background:rgba(184,134,43,.18);
  overflow:hidden;
}
.quota-fill{
  display:block;
  height:100%;
  width:100%;          /* JS yoksa dolu görünür; JS gerçek oranı yazar */
  border-radius:inherit;
  background:linear-gradient(90deg,#C99C40,#B8862B);
  transition:width .9s cubic-bezier(.22,.7,.3,1);
}

.cta-row{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:26px;
}
.hero-micro{
  margin-top:20px;
  font-size:var(--t-sm);
  color:var(--mute);
}

.hero-art{ position:relative; }

/* Tarayıcı çerçevesi: eskiden SVG'nin içine çizilmişti, artık gerçek ekran
   görüntüsünü saran ayrı bir katman. overflow:hidden görselin alt köşelerini
   çerçevenin yarıçapına kırpıyor. */
.browser{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.browser-bar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 16px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.browser-dots{ display:flex; gap:7px; flex:none; }
.browser-dots i{
  width:9px; height:9px;
  border-radius:50%;
  background:#C9D4C6;
}
.browser-url{
  min-width:0;
  max-width:280px;
  padding:5px 14px;
  background:var(--card);
  border-radius:100px;
  font-size:.72rem;
  color:var(--mute);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-shot{
  display:block;
  width:100%;
  height:auto;
}

/* imza: kart notu */
.note-card{
  position:absolute;
  left:-14px; bottom:-26px;
  width:min(272px,64%);
  margin:0;
  padding:20px 20px 16px;
  background:#FFFDF7;
  border:1px solid var(--ribbon-l);
  border-radius:4px 4px 10px 10px;
  box-shadow:0 18px 40px -20px rgba(20,32,24,.5);
  transform:rotate(-3.5deg);
}
.note-perf{
  position:absolute; left:14px; right:14px; top:11px;
  height:1px;
  background:repeating-linear-gradient(to right, var(--ribbon-l) 0 4px, transparent 4px 9px);
}
.note-hand{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.08rem;
  line-height:1.45;
  color:var(--ink);
  margin-top:8px;
}
.note-meta{
  margin-top:12px;
  font-size:.64rem;
  letter-spacing:.06em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ribbon);
}

/* ==========================================================================
   GÜVEN ŞERİDİ
   ========================================================================== */
.trust{
  border-block:1px solid var(--line);
  background:var(--card);
}
.trust-in{
  display:flex; flex-wrap:wrap;
  gap:14px clamp(20px,4vw,46px);
  padding-block:20px;
  justify-content:center;
}
.trust-item{
  display:flex; align-items:center; gap:9px;
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--ink-2);
  white-space:nowrap;
}
.trust-item .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--moss);
  box-shadow:0 0 0 3.5px rgba(61,139,99,.16);
  flex:none;
}

/* ==========================================================================
   NEDİR (uzun metin)
   ========================================================================== */
.prose-grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,5vw,68px);
  align-items:start;
}
.prose-head h2{ font-size:var(--t-h2); }
.prose-head{ position:sticky; top:96px; }
.prose p + p{ margin-top:19px; }
.prose p{ font-size:var(--t-lg); color:var(--ink-2); line-height:1.72; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   ÖZELLİKLER
   ========================================================================== */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.feat{
  background:var(--card);
  padding:clamp(22px,2.4vw,30px);
  transition:background-color .22s ease;
}
.feat:hover{ background:#FBFDFA; }
.feat h3{
  font-size:var(--t-h3);
  margin-bottom:10px;
  padding-top:14px;
  position:relative;
}
.feat h3::before{
  content:"";
  position:absolute; top:0; left:0;
  width:22px; height:2px;
  background:var(--ribbon);
  border-radius:2px;
}
.feat p{ font-size:var(--t-sm); color:var(--mute); line-height:1.66; }

/* ==========================================================================
   NEDEN WORDPRESS
   ========================================================================== */
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.4vw,28px);
}
.why{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);
}
.why h3{ font-size:var(--t-h3); margin-bottom:12px; color:var(--stem); }
.why p{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.7; }

/* ==========================================================================
   NASIL ÇALIŞIR (koyu)
   ========================================================================== */
.section-dark{
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(61,139,99,.28), transparent 60%),
    #10261B;
  color:#E6EEE8;
}
.section-dark .sec-head h2{ color:#fff; }
.section-dark .sec-sub{ color:rgba(230,238,232,.72); }
.section-dark .eyebrow{ color:#D9B968; }
.section-dark .eyebrow::before{ background:#D9B968; }

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:clamp(20px,2.6vw,30px);
  counter-reset:none;
}
.step{
  position:relative;
  padding-top:26px;
  border-top:1px solid rgba(230,238,232,.22);
}
.step-no{
  font-family:var(--f-display);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#10261B;
  background:#D9B968;
  width:27px; height:27px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  position:absolute; top:-14px; left:0;
}
.step h3{ font-size:var(--t-h3); color:#fff; margin-bottom:10px; }
.step p{ font-size:var(--t-sm); color:rgba(230,238,232,.76); line-height:1.7; }

/* ==========================================================================
   DEMO
   ========================================================================== */
.demo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.66fr);
  gap:clamp(16px,2.2vw,26px);
  align-items:start;
}
.shot{
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px 12px 0;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r-sm);
  background:var(--paper-2);
}
.shot figcaption{
  padding:13px 4px;
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--mute);
}

/* masaüstü görselleri: geniş "lead" + altında iki küçük */
.shot-lead{ grid-column:1 / 3; }

/* mobil ekran görüntüsü — telefon çerçevesi hissi, sağ kolonda iki satır boyunca */
.shot-phone{
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:center;
  width:100%;
  max-width:300px;
  padding:14px;
  background:linear-gradient(160deg,#1D2C23,#101A14);
  border-color:#0C130E;
  border-radius:34px;
  box-shadow:var(--shadow-lg);
}
.shot-phone img{
  border-radius:22px;
  background:#0C130E;
}
.shot-phone figcaption{
  padding:14px 4px 4px;
  color:rgba(230,238,232,.72);
  text-align:center;
}

.demo-cta{ margin-top:clamp(28px,3.5vw,42px); }

/* ==========================================================================
   TRENDYOL e-FATURA
   ========================================================================== */
.efatura-card{
  margin:0 auto;
  max-width:900px;
  padding:clamp(10px,1.4vw,16px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.efatura-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r);
  background:var(--paper-2);
}

/* ==========================================================================
   REFERANSLAR
   ========================================================================== */
.section-line{ border-top:1px solid var(--line); }

.ref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.4vw,26px);
  align-items:start;
}
.ref-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.ref-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

/* görsel alanı — ekran görüntüsü gelene kadar başlık bloğu olarak duruyor */
.ref-head{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:168px;
  padding:28px 22px;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217,185,104,.16), transparent 62%),
    linear-gradient(158deg,#1D3A2A,#0F1F17);
}
.ref-head::after{
  content:"";
  position:absolute; left:22px; right:22px; bottom:0;
  height:2px;
  background:repeating-linear-gradient(to right,#D9B968 0 5px, transparent 5px 11px);
  opacity:.55;
}
.ref-img{
  display:block;
  width:100%;
  height:auto;
}
.ref-mark{
  color:#D9B968;
  margin-bottom:6px;
}
.ref-mark svg{ width:34px; height:34px; display:block; }
.ref-name{
  font-size:var(--t-h3);
  color:#fff;
  overflow-wrap:anywhere;
}
.ref-domain{
  font-size:var(--t-xs);
  letter-spacing:.06em;
  color:rgba(230,238,232,.66);
  overflow-wrap:anywhere;
}
.ref-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
  padding:22px clamp(20px,2.2vw,26px) 24px;
}
.ref-desc{
  font-size:var(--t-sm);
  color:var(--ink-2);
  line-height:1.65;
  flex:1;
}
.ref-link{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--stem);
  text-decoration:none;
}
.ref-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.ref-link:hover .ico-arr{ transform:translateX(3px); }

/* ==========================================================================
   FİYATLAR — "sipariş fişi" kartı (tek fiyat)
   ========================================================================== */
.price-single{
  display:flex;
  justify-content:center;
}
.ticket-solo{
  width:100%;
  max-width:560px;
}
.ticket{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:34px clamp(22px,2.4vw,30px) clamp(24px,2.6vw,30px);
  display:flex; flex-direction:column;
}
.ticket-perf{
  position:absolute; left:18px; right:18px; top:16px;
  height:2px;
  background:repeating-linear-gradient(to right, var(--line) 0 5px, transparent 5px 11px);
}
.ticket-pick{
  border-color:var(--stem);
  box-shadow:var(--shadow-lg);
}
.ticket-pick .ticket-perf{
  background:repeating-linear-gradient(to right, var(--ribbon) 0 5px, transparent 5px 11px);
}
.ticket-flag{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ribbon);
  margin-bottom:8px;
}
.ticket-name{ font-size:1.55rem; }
.ticket-for{
  margin-top:6px;
  font-size:var(--t-sm);
  color:var(--mute);
}
.ticket-price{
  margin:20px 0 4px;
  font-family:var(--f-display);
  font-weight:800;
  color:var(--ink);
  line-height:1;
  display:flex; align-items:baseline; gap:3px;
  flex-wrap:wrap;
}
.ticket-price .cur{ font-size:1.4rem; color:var(--stem); }
.ticket-price .amount{
  font-size:clamp(2.1rem,7vw,2.9rem);
  letter-spacing:.02em;
  color:var(--stem);
}
.ticket-once{
  font-family:var(--f-body);
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--mute);
  margin-left:8px;
}
.ticket-list{
  margin:22px 0 26px;
  padding-top:20px;
  border-top:1px dashed var(--line);
  display:grid; gap:11px;
  flex:1;
}
.ticket-list-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px clamp(16px,2.4vw,26px);
}
@media (max-width:560px){
  .ticket-list-2{ grid-template-columns:1fr; }
}
.ticket-list li{
  position:relative;
  padding-left:26px;
  font-size:var(--t-sm);
  color:var(--ink-2);
  line-height:1.55;
  overflow-wrap:anywhere;
}
.ticket-list li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:13px; height:7px;
  border-left:2px solid var(--moss);
  border-bottom:2px solid var(--moss);
  transform:rotate(-45deg);
}
.price-note{
  margin:18px auto 0;
  max-width:560px;
  text-align:center;
  font-size:var(--t-sm);
  color:var(--mute);
}

/* ==========================================================================
   SSS
   ========================================================================== */
.faq-wrap{ max-width:920px; }
.faq{
  border-top:1px solid var(--line);
}
.qa{
  border-bottom:1px solid var(--line);
}
.qa summary{
  list-style:none;
  cursor:pointer;
  padding:22px 46px 22px 0;
  position:relative;
  display:block;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary h3{
  font-size:var(--t-h3);
  font-weight:600;
  color:var(--ink);
  display:inline;
  transition:color .18s ease;
}
.qa summary:hover h3{ color:var(--stem); }
.qa summary::after{
  content:"";
  position:absolute; right:6px; top:29px;
  width:13px; height:13px;
  border-right:2px solid var(--moss);
  border-bottom:2px solid var(--moss);
  transform:rotate(45deg);
  transition:transform .24s ease;
}
.qa[open] summary::after{ transform:rotate(-135deg); top:33px; }
.qa-body{ padding:0 8% 26px 0; }
.qa-body p{ color:var(--ink-2); line-height:1.72; }

/* ==========================================================================
   İLETİŞİM
   ========================================================================== */
.contact{ background:var(--paper-2); }
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,60px);
  align-items:start;
}
.contact-copy h2{ font-size:var(--t-h2); }
.contact-copy .lede{ margin-top:18px; max-width:46ch; }
.contact-copy .btn-lg{ margin-top:28px; }
.contact-alt{
  margin-top:16px;
  font-size:var(--t-sm);
  color:var(--mute);
}

.lead-form{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);
  box-shadow:var(--shadow);
}
.form-title{
  font-family:var(--f-display);
  font-size:var(--t-h3);
  font-weight:700;
  margin-bottom:20px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:7px;
}
.field input,
.field textarea{
  width:100%;
  padding:13px 15px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  font-size:var(--t-sm);
  transition:border-color .18s ease, background-color .18s ease;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9AA79F; }
.field input:focus,
.field textarea:focus{
  border-color:var(--moss);
  background:var(--card);
  outline:none;
}
.field input:focus-visible,
.field textarea:focus-visible{ outline:2.5px solid var(--ribbon); outline-offset:1px; }
.field.is-bad input,
.field.is-bad textarea{ border-color:#B23A3A; }

.form-note{
  margin-top:14px;
  font-size:var(--t-xs);
  color:var(--mute);
  text-align:center;
}
.form-note.is-bad{ color:#B23A3A; font-weight:500; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  background:#10261B;
  color:rgba(230,238,232,.72);
  padding-top:clamp(46px,6vw,72px);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,54px);
  padding-bottom:clamp(34px,4vw,52px);
}
.brand-foot .brand-text{ color:#fff; }
.brand-foot .brand-text em{ color:#D9B968; }
.brand-foot .brand-mark{ color:#8FC0A4; }
.foot-brand p{
  margin-top:16px;
  font-size:var(--t-sm);
  line-height:1.7;
  max-width:38ch;
}
.foot-h{
  font-family:var(--f-body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#D9B968;
  margin-bottom:16px;
}
.foot-nav{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot-nav a,
.foot-contact a{
  color:rgba(230,238,232,.78);
  font-size:var(--t-sm);
  text-decoration:none;
}
.foot-nav a:hover,
.foot-contact a:hover{ color:#fff; text-decoration:underline; }
.foot-contact p + p{ margin-top:10px; }

.foot-base{
  border-top:1px solid rgba(230,238,232,.14);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between;
  font-size:var(--t-xs);
  color:rgba(230,238,232,.55);
}

/* ==========================================================================
   MOBİL WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed;
  right:16px; bottom:16px;
  z-index:90;
  display:none; align-items:center; gap:9px;
  padding:13px 20px;
  background:var(--wa);
  color:#fff;
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  border-radius:100px;
  box-shadow:0 12px 30px -10px rgba(18,140,74,.7);
}
.wa-float svg{ width:20px; height:20px; }

/* ==========================================================================
   HAREKET
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.68,.36,1), transform .6s cubic-bezier(.22,.68,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   404
   ========================================================================== */
.page-404{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gut);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(184,134,43,.10), transparent 60%),
    var(--paper);
}
.err-wrap{
  width:100%;
  max-width:560px;
  text-align:center;
}
.err-wrap .brand{ justify-content:center; }
.err-code{
  margin-top:34px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(3.4rem,14vw,5.4rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--ribbon);
  opacity:.34;
}
.err-title{
  margin-top:10px;
  font-size:var(--t-h2);
  color:var(--ink);
}
.err-text{
  margin:14px auto 0;
  max-width:44ch;
  font-size:var(--t-md);
  color:var(--ink-2);
  line-height:1.68;
}
.err-cta{ margin-top:28px; }
.err-alt{
  margin-top:24px;
  font-size:var(--t-sm);
  color:var(--mute);
}
.err-alt a{ color:var(--stem); text-decoration:none; }
.err-alt a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   LIGHTBOX — [data-lightbox] taşıyan her görsele takılır
   ========================================================================== */
[data-lightbox]{
  cursor:zoom-in;
  transition:transform .22s ease, box-shadow .22s ease;
}
[data-lightbox]:hover{
  transform:scale(1.012);
  box-shadow:0 12px 32px -14px rgba(20,32,24,.55);
}
[data-lightbox]:focus-visible{
  outline:2.5px solid var(--ribbon);
  outline-offset:3px;
}

.lb{
  position:fixed; inset:0; z-index:210;
  display:none;
  align-items:center; justify-content:center;
  padding:clamp(16px,4vw,44px);
  background:rgba(10,18,13,.88);
  opacity:0;
  transition:opacity .22s ease;
}
.lb.is-active{ display:flex; }
.lb.is-open{ opacity:1; }

.lb-fig{
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%;
  transform:scale(.97);
  transition:transform .24s cubic-bezier(.22,.7,.3,1);
}
.lb.is-open .lb-fig{ transform:none; }

.lb-img{
  display:block;
  max-width:min(90vw,1200px);
  max-height:80vh;
  width:auto; height:auto;
  border-radius:var(--r);
  background:var(--paper-2);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.75);
}
.lb-cap{
  font-size:var(--t-sm);
  color:rgba(230,238,232,.82);
  text-align:center;
  max-width:60ch;
}
.lb-close{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  color:#fff;
  background:rgba(16,26,20,.6);
  border:1px solid rgba(230,238,232,.3);
  border-radius:50%;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.lb-close:hover{ background:rgba(16,26,20,.92); border-color:rgba(230,238,232,.55); }
.lb-close:focus-visible{ outline:2.5px solid var(--ribbon); outline-offset:2px; }

@media (max-width:620px){
  .lb-img{ max-width:92vw; max-height:70vh; }
  .lb-close{ top:10px; right:10px; }
}

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ max-width:min(100%, 620px); }
  .hero-art{ max-width:620px; }
  .note-card{ left:auto; right:6px; bottom:-20px; }
  .prose-grid{ grid-template-columns:1fr; }
  .prose-head{ position:static; }
  .contact-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav{
    position:fixed;
    inset:68px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
    box-shadow:0 24px 40px -28px rgba(20,32,24,.5);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:var(--t-md); }
  .nav a:last-child{ border-bottom:none; }
  .nav a::after{ display:none; }
  .head-cta{ display:none; }
  .nav-toggle{ display:block; }
  .wa-float{ display:inline-flex; }
  .demo-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .shot-lead{ grid-column:1 / -1; }
  .shot-phone{ grid-column:1 / -1; grid-row:auto; }
}

@media (max-width:620px){
  .trust-in{ justify-content:flex-start; }
  .foot-grid{ grid-template-columns:1fr; }
  .demo-grid{ grid-template-columns:minmax(0,1fr); }
  .shot-lead,
  .shot-phone{ grid-column:1 / -1; }
  .cta-row .btn{ width:100%; }
  .note-card{ width:min(230px,72%); }
  .qa-body{ padding-right:0; }
  body{ padding-bottom:76px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-head,.wa-float,.nav-toggle,.lead-form{ display:none; }
  body{ background:#fff; }
}