* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100vw; overflow-x: hidden; }
/* ⭐ TRENDYOL UYUMLU ÖNYÜZ PALETİ */
:root {
  --ty-primary:        #ff6821;   /* Trendyol turuncusu — CTA / fiyat / seçili durum */
  --ty-primary-dark:   #D9660F;   /* Koyu turuncu — rozet / gradient bitişi / hover */
  --ty-primary-soft:   #FFF4E8;   /* Seçili kart zemini (üst) */
  --ty-primary-soft-2: #FFE9D5;   /* Seçili kart zemini (alt) */
  --ty-primary-rgb:    255,104,33;
  --ty-dark:           #212121;   /* Trendyol metin siyahı */
  --ty-border:         #E6E6E6;
  --ty-border-strong:  #D9D9D9;
  --ty-green:          #0BA84A;   /* Trendyol yeşili — avantaj / kargo vurgusu */
  --ty-green-soft:     #E8F7EE;
  --ty-page-bg:        #F5F5F5;
  /* ⭐ Anons bar / paket rozetleri mavi vurgusu */
  --ty-announce:       #1A5FE8;
  /*  Fotoğraf altı rozet şeridi renkleri */
  --ty-ship-cod:       #00C950;
  --ty-ship-free:      #FF6900;
}

body { font-family: 'Outfit', sans-serif; background-color: var(--ty-page-bg); overflow-wrap: break-word; word-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; max-width: 100%; }

/* ── VEST MODA MARKA LOGOSU ──
   VEST: Bodoni Moda 700 (bold) · MODA: Montserrat 400, %75 boyut · letter-spacing 0.22em · tamamen siyah
   line-height 1 + center hizalama: header yüksekliğini şişirmeden büyür; küçük fontlu MODA, VEST'e dikey düzlemde ortalanır */
.brand-logo { display: inline-flex; align-items: center; gap: 0.45em; color: #000; white-space: nowrap; line-height: 1; }
.brand-logo .logo-vest {
  font-family: 'Bodoni Moda', 'Bodoni MT', 'Didot', serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand-logo .logo-moda {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  letter-spacing: 0.22em;
  margin-right: -0.22em; /* son harfin ardındaki artık boşluğu dengele */
}

.glass { background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }

.package-card { transition: all .2s ease; cursor: pointer; position: relative; }
.package-card:hover { transform: translateY(-2px); }
/* ⭐ Turuncu (Trendyol) çerçeve YALNIZCA seçili paket kartında görünür */
.package-card.selected {
  border-color: var(--ty-primary) !important;
  background: linear-gradient(180deg, var(--ty-primary-soft) 0%, var(--ty-primary-soft-2) 100%);
  box-shadow: 0 12px 24px -8px rgba(var(--ty-primary-rgb),0.35);
}
.package-card.selected .package-radio {
  background: var(--ty-primary); border-color: var(--ty-primary);
  display:flex; align-items:center; justify-content:center;
}
.package-card.selected .package-radio::after {
  content:''; display:block; width:7px; height:7px; border-radius:50%; background:#fff;
}
.package-radio {
  width:16px; height:16px; border:2px solid var(--ty-border-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition: all .15s;
}
@media (min-width: 640px) { .package-radio { width:18px; height:18px; } }
/* "En Avantajlı" kart: yükseltilmiş konum + nötr gölge (renkli çerçeve yok) */
.package-featured { transform: translateY(-14px); z-index: 5; box-shadow: 0 14px 28px -18px rgba(33,33,33,0.30); }
.package-featured:hover { transform: translateY(-16px); }
.package-featured.selected {
  transform: translateY(-14px); border-width: 3px !important;
  box-shadow: 0 18px 32px -12px rgba(var(--ty-primary-rgb),0.42);
}

.size-btn.active {
  border-color: var(--ty-primary) !important; background: var(--ty-primary) !important;
  color:#fff !important; box-shadow: 0 8px 16px -6px rgba(var(--ty-primary-rgb),0.4);
}

@keyframes sizeFinderShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-2px) rotate(-1.5deg); }
  30% { transform: translateX(2px) rotate(1.5deg); }
  45% { transform: translateX(-2px) rotate(-1.5deg); }
  60% { transform: translateX(2px) rotate(1.5deg); }
  75% { transform: translateX(-1px) rotate(0deg); }
}
@keyframes sizeFinderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,95,232,0.75), 0 0 15px 2px rgba(26,95,232,0.5), 0 4px 12px rgba(26,95,232,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(26,95,232,0), 0 0 25px 6px rgba(26,95,232,0.85), 0 4px 20px rgba(26,95,232,0.7); }
}
.size-finder-btn {
  animation: sizeFinderShake 2.5s ease-in-out infinite, sizeFinderGlow 1.8s ease-in-out infinite;
  position: relative; z-index: 1;
}
.size-finder-btn:hover {
  animation: sizeFinderShake 0.7s ease-in-out infinite, sizeFinderGlow 0.9s ease-in-out infinite;
}
.size-finder-btn:active { transform: scale(0.96); }

.size-table-wrap { max-height: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease; opacity: 0; }
.size-table-wrap.open { max-height: 2000px; opacity: 1; }

/* ⭐ Boy ↓ / Kilo → beden tablosu — app.js içindeki SIZE_CHART verisinin görünümü
   Punto: mobil 14px / md 15px (okunabilirlik tabanı) */
.size-chart { width: 100%; min-width: 780px; border-collapse: collapse; }
.size-chart th,
.size-chart td {
  padding: 9px 12px; font-size: 14px; line-height: 1.35; text-align: center;
  white-space: nowrap; border-bottom: 1px solid var(--ty-border);
}
.size-chart thead th { background: var(--ty-page-bg); color: #333333; font-weight: 700; }
.size-chart thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; }
.size-chart tbody th {
  background: #fff; color: var(--ty-dark); font-weight: 700; text-align: left;
  position: sticky; left: 0; z-index: 1;
}
.size-chart tbody tr:nth-child(even) { background: #FAFAFA; }
.size-chart tbody tr:nth-child(even) th { background: #FAFAFA; }
.size-chart tbody tr:last-child th,
.size-chart tbody tr:last-child td { border-bottom: none; }
.size-chart .sz-m { color: #666666; font-weight: 700; }
.size-chart .sz-l { color: #333333; font-weight: 700; }
.size-chart .sz-xl { color: var(--ty-dark); font-weight: 700; }
.size-chart .sz-xxl { color: var(--ty-primary); font-weight: 800; }
@media (min-width: 768px) {
  .size-chart th, .size-chart td { padding: 10px 14px; font-size: 15px; }
}

.color-tile {
  transition: all .18s ease; cursor: pointer; position: relative;
  border: 2px solid var(--ty-border); background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.color-tile:hover { border-color: var(--ty-border-strong); transform: translateY(-2px); }
.color-tile.selected {
  border-color: var(--ty-primary);
  box-shadow: 0 12px 24px -10px rgba(var(--ty-primary-rgb),0.5);
}
.color-tile.selected .color-check { display: flex; align-items: center; justify-content: center; }
.color-check {
  display:none; position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:50%;
  background: var(--ty-primary); color:#fff; font-size:13px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2;
}
.color-tile.selected .color-img-wrap { opacity: 0.7; }
/* ⭐ RENK KARTI - 1:1 KARE + CONTAIN */
.color-img-wrap {
  aspect-ratio: 1/1; width: 100%; background: var(--ty-page-bg);
  position: relative; overflow: hidden; transition: opacity .2s;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.color-img-wrap img { width: 100%; height: 100%; object-fit: contain; }

.cross-sell-item { transition: all .18s ease; cursor: pointer; border: 2px solid var(--ty-border); background: #fff; }
.cross-sell-item:hover { border-color: var(--ty-border-strong); }
.cross-sell-item.active { border-color: var(--ty-green); background: var(--ty-green-soft); box-shadow: 0 8px 18px -8px rgba(11,168,74,0.35); }

.accordion-content { max-height:0; overflow:hidden; transition: max-height .35s ease; }
.accordion-item.open .accordion-content { max-height: 1600px; }
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-icon { transition: transform .25s; }

.sticky-cta-wrap { transition: transform .3s ease, opacity .3s ease; }
.sticky-cta-wrap.hide { transform: translateY(110%); opacity:0; pointer-events:none; }

@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-track { display:inline-flex; animation: ticker 11s linear infinite; }

.star-gold { color: #f59e0b; }
.progress-fill { transition: width .35s ease; }

/* ⭐ HERO - 1:1 KARE + ORTALANMIŞ GÖRSEL */
.hero-aspect { aspect-ratio: 1/1; }
.hero-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
}
@media (min-width: 640px) { .hero-img { padding: 24px; } }
@media (min-width: 768px) { .hero-img { padding: 32px; } }

/*  FOTOĞRAF ÜZERİ (OVERLAY) ROZET ŞERİDİ — "KAPIDA ÖDEME" ↔ "ÜCRETSİZ KARGO"
   Şerit fotoğrafın EN ALTINA yapışır, fotoğraf alanı genişliğindedir (left/right:0)
   ve görselin ÜZERİNDE overlay olarak durur (ayrı bir bölüm DEĞİLDİR).
   Etiketler 2 saniye arayla sırayla YUKARIDAN AŞAĞI kayarak gelir.
   Yuvarlak köşeler, üstteki #heroSliderWrap overflow:hidden + border-radius ile kırpılır. */
.ship-badge-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  height: 30px; overflow: hidden; pointer-events: none;
  display: flex; justify-content: center; align-items: flex-start;
}
.ship-badge {
  position: absolute; top: 0; left: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 14px;
  color: #fff; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
  transform: translate(0, -120%);
  box-shadow: 0 -6px 14px -6px rgba(0,0,0,.35);
}
.ship-badge--cod  { background: var(--ty-ship-cod); }
.ship-badge--free { background: var(--ty-ship-free); }

/* Anons bar: ÜCRETSİZ KARGO rozetiyle aynı zemin (tek kaynak) */
.announce-bar { background: var(--ty-ship-free); }
@keyframes shipBadgeIn  { from { transform: translate(0, -120%); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes shipBadgeOut { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(0, 120%); opacity: 0; } }
.ship-badge.is-in  { animation: shipBadgeIn  .45s cubic-bezier(.22,.9,.32,1) forwards; }
.ship-badge.is-out { animation: shipBadgeOut .45s cubic-bezier(.22,.9,.32,1) forwards; }
@media (min-width: 640px) {
  .ship-badge-strip { height: 34px; }
  .ship-badge { height: 34px; font-size: 13.5px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ship-badge.is-in, .ship-badge.is-out { animation-duration: .01s; }
}

/* Sipariş özeti — belirgin avantaj ibareleri (Kargo Bedava / Şeffaf Paket) */
.pill-promo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ty-green-soft);
  border: 1px solid rgba(11,168,74,.45);
  color: var(--ty-dark);
  font-size: 14px; font-weight: 800;
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
}
.pill-promo i { color: var(--ty-green); font-size: 15px; }
@media (min-width: 768px) {
  .pill-promo { font-size: 15px; padding: 8px 16px; }
  .pill-promo i { font-size: 16px; }
}

/* Müşteri Yorumları Masonry Grid (Pinterest Tarzı - Mobilde & Masaüstünde 2 Kolon) */
.review-masonry-grid {
  column-count: 2;
  column-gap: 12px;
  width: 100%;
}
.review-masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .review-masonry-grid {
    column-count: 2;
    column-gap: 14px;
  }
  .review-masonry-item {
    margin-bottom: 14px;
  }
}
@media (min-width: 768px) {
  .review-masonry-grid {
    column-count: 2;
    column-gap: 14px;
  }
}
@media (min-width: 1024px) {
  .review-masonry-grid {
    column-count: 2;
    column-gap: 16px;
  }
  .review-masonry-item {
    margin-bottom: 16px;
  }
}

.review-card {
  background: #ffffff;
  border: 1px solid var(--ty-border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.review-card-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  background: #f8fafc;
  transition: filter .2s ease;
}
.review-card-photo:hover {
  filter: brightness(0.97);
}

@media (max-width: 640px) {
  .package-card { padding: 8px 4px !important; }
  .package-featured { transform: translateY(-10px); }
  .package-featured:hover, .package-featured.selected { transform: translateY(-10px); }
}

#lightbox.show, #sizeModal.show, #contractModal.show, #orderSuccessModal.show { display:flex; }

@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.success-icon-pop { animation: successPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ⭐ Mobil tipografi NOTU: punto ölçeğinin tek kaynağı index.html içindeki
   tailwind.config.fontSize bloğudur (3xs 11px · xs 14px · sm 15px · base 16px).
   ≤360px ekranlarda metin KÜÇÜLTÜLMEZ; yalnızca paket kartı yüksekliği ayarlanır. */
@media (max-width: 360px) {
  .package-featured { transform: translateY(-8px); }
}