/* ====== ISTANBUL TRANSFER – Premium White & Gold ====== */

:root {

  --ink: #1a1a2e;

  --ink-light: #3a3a5c;

  --muted: #6b7280;

  --line: #e5e7eb;

  --line-2: #d1d5db;

  --gold: #b8860b;

  --gold-light: #d4a843;

  --gold-dark: #8b6914;

  --brand: #b8860b;

  --brand-ink: #8b6914;

  --whatsapp: #25d366;

  --bg: #ffffff;

  --bg-soft: #f9fafb;

  --card: #ffffff;

  --radius: 16px;

  --radius-sm: 10px;

  --shadow: 0 4px 24px rgba(0,0,0,.06);

  --shadow-lg: 0 12px 40px rgba(0,0,0,.08);

  --transition: .25s cubic-bezier(.4,0,.2,1);

}



@font-face {

  font-family: 'HelveticaThin';

  src: url('../font/HelveticaNeueThin.otf') format('truetype');

  font-weight: normal;

  font-style: normal;

}



* { box-sizing: border-box; }



html, body {

  margin: 0;

  padding: 0;

  background: var(--bg);

  color: var(--ink);

  font-family: 'Inter', 'HelveticaLight', system-ui, -apple-system, sans-serif;

  -webkit-font-smoothing: antialiased;

  scroll-behavior: smooth;

}



img { max-width: 100%; display: block; }

svg { max-width: 100%; overflow: visible; display: inline-block; vertical-align: middle; }



.imgaa {

  max-width: 100%;

  display: block;

  margin: auto;

}



a { color: inherit; text-decoration: none; }



.container {

  width: min(1200px, 92vw);

  margin-inline: auto;

}



.two {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



@media (max-width: 600px) {

  .two { grid-template-columns: 1fr; }

}



/* =========================================

   NAV – clean white sticky

   ========================================= */

.nav {

  position: sticky;

  top: 0;

  background: rgba(255,255,255,.92);

  backdrop-filter: blur(16px) saturate(1.4);

  -webkit-backdrop-filter: blur(16px) saturate(1.4);

  border-bottom: 1px solid var(--line);

  z-index: 9999999;

}



.nav-in {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 700;

  width: 100%;

  height: 68px;

  justify-content: space-between;

}



.brand span { font-size: 14px; }



.brand img {

  width: 56px;

  height: 56px;

  border-radius: 10px;

}



.logobaslik h4 {

  margin: 0;

  font-size: 20px;

  font-weight: 800;

  letter-spacing: 3px;

  color: var(--gold);

}



/* Countdown pill */

.cd-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  border-radius: 999px;

  background: #fef3c7;

  border: 1px solid #fbbf24;

  font-size: 13px;

  color: var(--gold-dark);

  white-space: nowrap;

}



.cd-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #ef4444;

  animation: pulse-dot 1.5s ease-in-out infinite;

}



@keyframes pulse-dot {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: .4; transform: scale(.7); }

}



/* =========================================

   BUTTONS

   ========================================= */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 11px 16px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--line);

  background: #fff;

  color: var(--ink);

  font-weight: 600;

  font-size: 14px;

  cursor: pointer;

  transition: all var(--transition);

}



.btn:hover {

  background: var(--bg-soft);

  border-color: var(--line-2);

}



.btn-primary {

  border-color: var(--gold);

  background: var(--gold);

  color: #fff;

}



.btn-primary:hover {

  background: var(--gold-dark);

}



/* =========================================

   HERO & SEARCH BAND

   ========================================= */

.hero {

  padding: 0;

  border-bottom: none;

}



.search-band {

  position: relative;

  z-index: 100;

  border-bottom: none;

  background: url("../img/banner.jpg") no-repeat center center / cover;

  min-height: auto;

}



.search-band::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(15,15,35,.82) 0%, rgba(15,15,35,.65) 50%, rgba(15,15,35,.82) 100%);

}



.search-card {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 48px;

  align-items: center;

  padding: 60px 0;

  opacity: 0.99;

}



/* Hero right side text */

.hero-text {

  color: #fff;

  overflow: hidden;

  min-width: 0;

}



.hero-text h1 {

  font-size: clamp(28px, 4vw, 48px);

  font-weight: 800;

  line-height: 1.15;

  margin: 0 0 18px;

  letter-spacing: -0.5px;

}



.hero-text h1 span {

  color: var(--gold-light);

}



.hero-text p {

  font-size: 16px;

  line-height: 1.7;

  color: rgba(255,255,255,.75);

  margin: 0 0 24px;

}



.hero-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(255,255,255,.1);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,.15);

  color: #fff;

  font-size: 13px;

  font-weight: 500;

  white-space: nowrap;

}



.hero-badge svg {

  width: 16px;

  height: 16px;

  min-width: 16px;

  min-height: 16px;

  flex: 0 0 16px;

  color: var(--gold-light);

}



/* =========================================

   FORM CARD – white elevated

   ========================================= */

.card {

  border: none;

  border-radius: 20px;

  background: #fff;

  padding: 28px;

  box-shadow: 0 20px 60px rgba(0,0,0,.15);

}



.card p {

  color: var(--muted) !important;

  font-size: 14px !important;

}



.form {

  display: grid;

  gap: 14px;

}



.label {

  font-size: 11px;

  color: var(--gold-dark);

  margin: 0 0 6px;

  text-transform: uppercase;

  letter-spacing: .8px;

  font-weight: 700;

}



.input { position: relative; }



.input input {

  width: 100%;

  border: 1.5px solid var(--line);

  border-radius: var(--radius-sm);

  padding: 12px 14px;

  font-size: 14px;

  outline: 0;

  background: var(--bg-soft);

  color: var(--ink);

  transition: all var(--transition);

  font-family: inherit;

}



.input input::placeholder {

  color: #9ca3af;

}



.input input:focus {

  border-color: var(--gold);

  background: #fff;

  box-shadow: 0 0 0 3px rgba(184,134,11,.1);

}



.input .i-right {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  color: #9ca3af;

}



.row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



@media (max-width: 600px) {

  .row { grid-template-columns: 1fr; }

}



.dd { position: relative; }



.hero,

.search-band {

  position: relative;

  z-index: 100;

}



.suggest,

.panel {

  z-index: 1000;

}



.select {

  display: flex;

  align-items: center;

  gap: 10px;

  border: 1.5px solid var(--line);

  border-radius: var(--radius-sm);

  padding: 12px;

  background: var(--bg-soft);

  cursor: pointer;

  transition: all var(--transition);

}



.select:hover {

  border-color: var(--gold);

  background: #fff;

}



.select img {

  width: 60px;

  border-radius: 8px;

}



.panel {

  position: absolute;

  left: 0;

  right: 0;

  top: calc(100% + 8px);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: #fff;

  box-shadow: var(--shadow-lg);

  display: none;

  z-index: 20;

  max-height: 340px;

  overflow: auto;

}



.opt {

  display: flex;

  gap: 10px;

  align-items: center;

  padding: 12px;

  border-bottom: 1px solid #f3f4f6;

  cursor: pointer;

  transition: background var(--transition);

}



.opt:hover {

  background: #fef9ee;

}



.opt:last-child { border-bottom: 0; }

.opt small { color: var(--muted); }

.opt strong { color: var(--ink); }



/* =========================================

   SUGGEST DROPDOWN

   ========================================= */

.suggest {

  position: absolute;

  left: 0;

  right: 0;

  top: 80px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: #fff;

  box-shadow: var(--shadow-lg);

  display: none;

  z-index: 25;

  max-height: 320px;

  overflow: auto;

}



.suggest ul {

  list-style: none;

  margin: 0;

  padding: 6px;

}



.suggest li {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 10px;

  padding: 10px;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: background var(--transition);

}



.suggest li:hover {

  background: #fef9ee;

}



.thumb {

  width: 36px;

  height: 36px;

  border-radius: 8px;

  border: 1px solid var(--line);

  background: var(--bg-soft);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.thumb img {

  width: 20px;

  height: 20px;

}



.suggest .title {

  font-weight: 600;

  color: var(--ink);

}



.suggest .meta {

  font-size: 12px;

  color: var(--muted);

}



.tag {

  font-size: 11px;

  padding: 4px 8px;

  border: 1px solid #fbbf24;

  border-radius: 999px;

  background: #fef3c7;

  color: var(--gold-dark);

}



.hl {

  background: #fef3c7;

  border: 1px solid #fbbf24;

  border-radius: 4px;

  padding: 0 2px;

}



/* =========================================

   CTA ACTIONS

   ========================================= */

.actions {

  display: flex;

  gap: 10px;

  align-items: center;

  margin-top: 6px;

  justify-content: stretch;

}



.btn-wa {

  width: 100%;

  background: linear-gradient(135deg, #25d366, #128c3e);

  color: #fff;

  border: none;

  cursor: pointer;

  font-size: 15px;

  font-weight: 700;

  padding: 14px 20px;

  border-radius: var(--radius-sm);

  letter-spacing: .3px;

  box-shadow: 0 4px 16px rgba(37,211,102,.25);

  transition: all var(--transition);

}



.btn-wa:hover {

  background: linear-gradient(135deg, #2ee674, #25d366);

  color: #fff;

  box-shadow: 0 6px 24px rgba(37,211,102,.35);

  transform: translateY(-1px);

}



.error {

  color: #dc2626;

  font-size: 12px;

  margin-top: 6px;

}



/* =========================================

   SECTIONS (general)

   ========================================= */

.section {

  position: relative;

}



.section h2 {

  font-size: clamp(22px, 3.2vw, 32px);

  margin: 0 0 12px;

  font-weight: 800;

  color: var(--ink);

}



/* =========================================

   HOW IT WORKS

   ========================================= */

.how {

  position: relative;

  padding: 80px 0;

  background: var(--bg-soft);

}



.how .headline {

  display: flex;

  align-items: baseline;

  gap: 12px;

  margin: 0 0 36px;

}



.how .headline h2 {

  font-size: clamp(22px, 3.2vw, 32px);

  margin: 0;

  color: var(--ink);

}



.how .headline .sub {

  color: var(--muted);

  font-size: 14px;

}



.how .grid {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



@media (max-width: 980px) {

  .how .grid { grid-template-columns: 1fr; }

}



.how .card {

  border: 1px solid var(--line);

  border-radius: 20px;

  background: #fff;

  padding: 28px 24px;

  transition: all var(--transition);

  position: relative;

  overflow: hidden;

  box-shadow: none;

}



.how .card::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--gold), var(--gold-light));

  opacity: 0;

  transition: opacity var(--transition);

}



.how .card:hover {

  transform: translateY(-4px);

  border-color: #fbbf24;

  box-shadow: 0 16px 40px rgba(0,0,0,.06);

}



.how .card:hover::after {

  opacity: 1;

}



.how .badge {

  position: absolute;

  top: 16px;

  left: 24px;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: #fef3c7;

  border: 2px solid var(--gold);

  color: var(--gold-dark);

  font-weight: 700;

  font-size: 14px;

}



.how .ico {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, #fef3c7, #fff7ed);

  border: 1px solid #fbbf24;

  margin-bottom: 14px;

  margin-top: 44px;

  color: var(--gold);

}



.how .ico svg {

  width: 24px;

  height: 24px;

  min-width: 24px;

  min-height: 24px;

  flex: 0 0 24px;

}



.how .title {

  font-weight: 700;

  font-size: 17px;

  margin: 6px 0 8px;

  color: var(--ink);

}



.how .desc {

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;

}



.how .pills {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

}



.how .pill {

  font-size: 11px;

  padding: 5px 10px;

  border: 1px solid #fbbf24;

  border-radius: 999px;

  background: #fef3c7;

  color: var(--gold-dark);

  font-weight: 500;

}



.how .checks { margin-top: 12px; }



.how .check {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 14px;

  color: var(--ink-light);

  margin-bottom: 4px;

}



.how .check svg {

  width: 18px;

  height: 18px;

  min-width: 18px;

  min-height: 18px;

  flex: 0 0 18px;

  color: #16a34a;

}



/* =========================================

   INFO / TEXT SECTIONS

   ========================================= */

.info {

  margin-bottom: 0;

}



.info-bg {

  width: 100%;

  padding: 64px 0;

  background: var(--bg-soft);

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  color: var(--ink);

}



.info-bg h3 {

  max-width: 85%;

  margin: 0 auto 20px auto;

  font-size: 22px;

  line-height: 1.5;

  color: var(--gold-dark);

  text-align: left;

  font-weight: 700;

}



.info-bg p {

  max-width: 85%;

  margin: 0 auto 18px auto;

  font-size: 15px;

  line-height: 1.75;

  color: var(--muted);

  text-align: left;

}



/* =========================================

   FLEET SECTION

   ========================================= */

#fleet {

  padding: 80px 0;

  background: #fff;

  border-bottom: 1px solid var(--line);

}



#fleet h2 {

  text-align: center;

  margin-bottom: 40px;

}



.cols {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-bottom: 0;

}



@media (max-width: 980px) {

  .cols { grid-template-columns: 1fr; }

}



.item {

  border: 1px solid var(--line);

  border-radius: 20px;

  background: #fff;

  padding: 28px 20px;

  text-align: center;

  transition: all var(--transition);

}



.item:hover {

  border-color: #fbbf24;

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(0,0,0,.06);

}



.item strong {

  color: var(--ink);

  font-size: 16px;

}



.kv {

  display: flex;

  gap: 8px;

  justify-content: center;

  margin-top: 12px;

  flex-wrap: wrap;

}



.kv span {

  font-size: 11px;

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 5px 10px;

  background: var(--bg-soft);

  color: var(--muted);

}



/* =========================================

   FOOTER

   ========================================= */

.footer {

  padding: 40px 0;

  border-top: 1px solid var(--line);

  background: #fff;

}



.footer .grid {

  display: grid;

  gap: 12px;

}



@media (max-width: 980px) {

  .footer .grid { grid-template-columns: 1fr; }

}



small { color: var(--muted); }



.footerduzen {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.footerduzen p {

  color: var(--muted) !important;

}



.brandss {

  width: 130px;

  text-align: center;

}



.brandss h2 {

  margin: 0;

  font-size: 18px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--gold) !important;

  -webkit-text-fill-color: var(--gold) !important;

}



@media (max-width: 780px) {

  .footerduzen {

    display: flex;

    flex-direction: column;

    gap: 20px;

    text-align: center;

  }

  .brandss {

    width: 100px;

    margin: auto;

  }

  .mobilicon { display: none; }

}



/* =========================================

   FLATPICKR – White Gold Theme

   ========================================= */

.flatpickr-calendar {

  border: 1px solid var(--line);

  border-radius: 16px;

  box-shadow: var(--shadow-lg);

  background: #fff !important;

  overflow: hidden;

}



.flatpickr-months {

  padding: 8px 10px;

  background: transparent;

}



.flatpickr-current-month {

  font-weight: 700;

  letter-spacing: .5px;

  text-transform: uppercase;

  color: var(--ink) !important;

}



.flatpickr-monthDropdown-months,

.numInputWrapper {

  color: var(--ink);

  background: transparent !important;

}



.flatpickr-weekdays {

  background: var(--bg-soft);

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}



.flatpickr-weekday {

  color: var(--gold) !important;

  font-weight: 600;

}



.flatpickr-day {

  border-radius: 10px;

  line-height: 38px;

  height: 38px;

  width: 38px;

  margin: 2px;

  color: var(--ink);

}



.flatpickr-day:hover {

  background: #fef3c7;

  border-color: transparent;

}



.flatpickr-day.today {

  border: 1px solid var(--gold) !important;

}



.flatpickr-day.selected,

.flatpickr-day.selected:focus,

.flatpickr-day.selected:hover {

  background: var(--gold) !important;

  color: #fff !important;

  border: none;

  font-weight: 700;

}



.flatpickr-day.flatpickr-disabled {

  color: #d1d5db !important;

}



.flatpickr-prev-month,

.flatpickr-next-month {

  color: var(--gold) !important;

}



.flatpickr-prev-month svg,

.flatpickr-next-month svg {

  fill: var(--gold) !important;

}



.flatpickr-calendar.arrowTop:before,

.flatpickr-calendar.arrowTop:after {

  display: none;

}



/* =========================================

   WhatsApp FAB

   ========================================= */

.wa-fab {

  position: fixed;

  right: 20px;

  bottom: 20px;

  z-index: 120;

  width: 60px;

  height: 60px;

  border-radius: 999px;

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, #25d366, #128c3e);

  color: #fff;

  border: none;

  box-shadow: 0 8px 28px rgba(37,211,102,.3);

  cursor: pointer;

  transition: all var(--transition);

  animation: fab-breathe 3s ease-in-out infinite;

}



@keyframes fab-breathe {

  0%, 100% { box-shadow: 0 8px 28px rgba(37,211,102,.3); }

  50% { box-shadow: 0 8px 40px rgba(37,211,102,.5); }

}



.wa-fab:hover {

  background: linear-gradient(135deg, #2ee674, #25d366);

  transform: scale(1.08);

}



@media (max-width: 600px) {

  .wa-fab {

    right: 14px;

    bottom: 14px;

    width: 54px;

    height: 54px;

  }

}



.highlight-wa {

  background: #fef3c7 !important;

  color: var(--gold-dark) !important;

  border: 1px solid #fbbf24;

  border-radius: 10px;

  padding: 8px 12px;

  transition: background .3s ease, color .3s ease;

}



/* =========================================

   RESPONSIVE

   ========================================= */

@media (max-width: 780px) {

  .logobaslik { width: 50%; }

  .container {

    width: min(94%, 94vw);

    margin-inline: auto;

  }

  .search-card {

    grid-template-columns: 1fr;

    gap: 24px;

    padding: 24px 0;

  }

  .hero-text { text-align: center; order: 2; }

  .card { order: 1; }

  .hero-text h1 { font-size: 26px; }

  .hero-badges { justify-content: center; }

}



@media (max-width: 600px) {

  .brand { height: 58px; }

  .card { padding: 20px; }

  .how { padding: 50px 0; }

  .info-bg { padding: 40px 0; }

  .info-bg h3, .info-bg p { max-width: 95%; }

  #fleet { padding: 50px 0; }

}



/* =========================================

   SCROLLBAR (webkit)

   ========================================= */

::-webkit-scrollbar {

  width: 6px;

}



::-webkit-scrollbar-track {

  background: #f3f4f6;

}



::-webkit-scrollbar-thumb {

  background: #d1d5db;

  border-radius: 3px;

}



::-webkit-scrollbar-thumb:hover {

  background: #9ca3af;

}



/* =========================================

   SELECTION

   ========================================= */

::selection {

  background: rgba(184,134,11,.15);

  color: var(--ink);

}