/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;

  width: 100%;
  height: 100%;
}

body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #20242a;
}

.display-body {
  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #111;
}

.screen {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #fff;
}

.screen-loading {
  display: grid;

  place-items: center;

  font-size: 42px;
}


/* =========================================================
   HEADER
========================================================= */

.top {
  height: 145px;
  min-height: 145px;

  display: grid;

  grid-template-columns:
    minmax(500px, 1.8fr)
    minmax(280px, .82fr)
    minmax(180px, .48fr)
    minmax(220px, .62fr);

  align-items: center;

  gap: 18px;

  padding:
    15px
    26px;

  background: #fff;

  border-bottom:
    3px solid #b90000;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  display: flex;
  align-items: center;

  gap: 22px;

  min-width: 0;
}

.logo-box {
  width: 98px;
  height: 98px;

  min-width: 98px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #fff;

  color: #d40000;

  border:
    7px solid #d40000;

  border-radius: 16px;

  font-size: 66px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 8px 24px
    rgba(214, 0, 0, .08);
}

.logo-box img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.brand-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.brand h1 {
  margin: 0;

  color: #d40000;

  font-size:
    clamp(
      42px,
      3vw,
      60px
    );

  font-weight: 900;

  line-height: .95;

  white-space: nowrap;
}

.brand p {
  margin:
    8px
    0
    0;

  color: #555;

  font-size: 18px;
  font-weight: 700;

  letter-spacing: .5px;

  white-space: nowrap;
}


/* =========================================================
   HEADER CARDS
========================================================= */

.smart-card {
  width: 100%;
  height: 88px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding:
    12px
    15px;

  background: #fff;

  border:
    1px solid
    rgba(214, 0, 0, .08);

  border-radius: 22px;

  box-shadow:
    0 10px 28px
    rgba(60, 0, 0, .08);

  overflow: hidden;
}

.card-icon {
  width: 48px;
  height: 48px;

  min-width: 48px;

  display: grid;

  place-items: center;

  border-radius: 16px;
}

.card-icon svg {
  width: 28px;
  height: 28px;

  fill: currentColor;
}

.phone-modern,
.clock-modern {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #e00000,
      #a90000
    );

  border-radius: 50%;

  box-shadow:
    0 8px 18px
    rgba(214, 0, 0, .25);
}

.weather-modern {
  background: #fff5d7;

  font-size: 31px;
}

.smart-card-text {
  min-width: 0;
}

.smart-card-text strong {
  display: block;

  color: #111827;

  font-size: 23px;
  font-weight: 900;

  line-height: 1.05;

  white-space: nowrap;
}

.smart-card-text span {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 7px;

  color: #444;

  font-size: 13px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.mini-svg {
  width: 16px;
  height: 16px;

  flex-shrink: 0;

  fill: #d60000;
}

.weather-card {
  max-width: 210px;

  justify-content: center;

  padding-left: 12px;
  padding-right: 12px;
}

.clock-card {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #e00000,
      #b90000
    );

  border: 0;
}

.clock-card .smart-card-text strong,
.clock-card .smart-card-text span {
  color: #fff;
}

.clock-text strong {
  font-size: 34px;
}

.clock-text span {
  font-size: 11px;

  line-height: 1.15;
}


/* =========================================================
   DAY MODE
========================================================= */

.pharmacy-day {
  background: #f8f8f8;
}


/* =========================================================
   CAMPAIGN
========================================================= */

.campaign-section {
  flex: 1;

  min-height: 0;

  padding:
    26px
    32px
    16px;
}


/*
  Kampanya artık iki ayrı kart değil.
  Tek campaign-card içinde:
  sol = kampanya
  sağ = ürün
*/

.campaign-card {
  width: 100%;
  height: 100%;

  min-height: 0;

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  position: relative;

  overflow: hidden;

  border-radius: 32px;

  background:
    linear-gradient(
      105deg,
      #d60000 0%,
      #c90000 51%,
      #f9eeee 51%,
      #ffffff 100%
    );

  box-shadow:
    0 14px 40px
    rgba(150, 0, 0, .15);
}


/* =========================================================
   CAMPAIGN LEFT
========================================================= */

.campaign-copy {
  position: relative;

  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    34px
    44px;

  color: #fff;
}

.label {
  width: max-content;

  margin-bottom: 18px;

  padding:
    8px
    22px;

  background: #fff;

  color: #d60000;

  border-radius: 999px;

  font-size: 19px;
  font-weight: 900;
}

.campaign-copy h2 {
  margin:
    0
    0
    16px;

  color: #fff;

  font-size:
    clamp(
      38px,
      3.2vw,
      62px
    );

  line-height: 1.03;

  font-weight: 900;

  text-transform: uppercase;
}

.main-discount {
  color: #fff;

  font-size:
    clamp(
      76px,
      6.4vw,
      124px
    );

  font-weight: 900;

  line-height: .8;

  letter-spacing: -3px;
}

.main-discount span {
  display: block;

  margin-top: 10px;

  font-size:
    clamp(
      30px,
      2.5vw,
      48px
    );

  letter-spacing: 0;
}

.main-discount.new {
  font-size:
    clamp(
      52px,
      4.3vw,
      82px
    );

  letter-spacing: 0;
}

.campaign-copy p {
  max-width: 90%;

  margin:
    22px
    0
    0;

  color: #fff;

  font-size:
    clamp(
      19px,
      1.45vw,
      28px
    );

  line-height: 1.25;

  font-weight: 700;
}


/* =========================================================
   CAMPAIGN PRODUCT
========================================================= */

.campaign-product {
  position: relative;

  z-index: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    22px
    36px
    20px;
}


/*
  Görsel arkasındaki çok hafif
  daire ürünü öne çıkarıyor.
*/

.campaign-product::before {
  content: "";

  position: absolute;

  top: 45%;

  left: 50%;

  width: 360px;
  height: 360px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  background:
    rgba(
      214,
      0,
      0,
      .055
    );

  z-index: 0;
}

.campaign-product-image {
  position: relative;

  z-index: 1;

  flex: 1;

  width: 100%;

  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-product-image img {
  max-width: 82%;
  max-height: 300px;

  width: auto;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 16px 18px
      rgba(0,0,0,.12)
    );
}

.campaign-placeholder {
  width: 220px;
  height: 220px;

  display: grid;

  place-items: center;

  background: #f5f5f5;

  color: #d60000;

  border-radius: 30px;

  font-size: 80px;
}


/* =========================================================
   CAMPAIGN PRODUCT INFO
========================================================= */

.campaign-caption {
  position: relative;

  z-index: 2;

  width: 88%;

  padding-top: 8px;
  padding-bottom: 4px;

  text-align: center;
}

.campaign-brand {
  margin-bottom: 6px;

  color: #777;

  font-size: 15px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1.4px;
}

.campaign-caption h3 {
  margin: 0;

  color: #c90000;

  font-size: 27px;

  line-height: 1.1;

  font-weight: 900;
}

.campaign-caption p {
  margin:
    7px
    0
    0;

  color: #555;

  font-size: 16px;

  line-height: 1.25;

  font-weight: 500;
}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {
  height: 174px;
  min-height: 174px;

  padding:
    0
    32px
    13px;
}

.section-title {
  width: max-content;

  margin:
    0
    auto
    11px;

  padding:
    8px
    32px;

  background: #d60000;

  color: #fff;

  border-radius: 999px;

  font-size: 21px;
  font-weight: 900;
}

.products-grid {
  display: grid;

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

  gap: 13px;
}

.product-card {
  height: 108px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 11px;

  overflow: hidden;

  background: #fff;

  border:
    1px solid #eeeeee;

  border-radius: 17px;

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.04);
}

.product-image {
  width: 68px;
  height: 68px;

  min-width: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f5f5f5;

  border-radius: 11px;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}

.product-image span {
  color: #d60000;

  font-size: 30px;
}

.product-info {
  min-width: 0;
}

.product-info b {
  display: block;

  color: #222;

  font-size: 16px;

  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.product-info small {
  display: block;

  margin-top: 3px;

  color: #666;

  font-size: 12px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.product-price {
  margin-top: 6px;
}

.product-info em {
  margin-right: 5px;

  color: #777;

  font-size: 12px;

  font-style: normal;

  text-decoration: line-through;
}

.product-info strong {
  color: #d60000;

  font-size: 21px;

  font-weight: 900;
}

.empty-products {
  grid-column:
    1 / -1;

  text-align: center;

  color: #777;

  font-size: 22px;
}


/* =========================================================
   DAY FOOTER
========================================================= */

.bottom-bar {
  height: 100px;
  min-height: 100px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    12px
    32px;

  background: #d60000;

  color: #fff;

  font-size: 29px;
  font-weight: 900;
}

.qr-area {
  display: flex;
  align-items: center;

  gap: 14px;
}

.qr-area span {
  font-size: 20px;

  white-space: nowrap;
}

.qr-area img {
  width: 76px;
  height: 76px;

  padding: 4px;

  background: #fff;

  border-radius: 7px;
}


/* =========================================================
   DUTY MODE
========================================================= */

.pharmacy-duty-v2 {
  background: #fff;
}

.duty-v2-section {
  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap: 46px;

  padding:
    42px
    52px
    24px;

  background:
    radial-gradient(
      circle at 20% 45%,
      #fff2f2 0,
      #fff 48%
    );
}

.duty-v2-left {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.duty-v2-label {
  width: max-content;

  min-height: 82px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding:
    15px
    32px;

  background: #d40000;

  color: #fff;

  border-radius: 999px;

  white-space: nowrap;
}

.duty-v2-label span {
  font-size: 39px;
}

.duty-v2-label strong {
  font-size: 31px;

  line-height: 1;

  font-weight: 900;
}

.duty-v2-left h2 {
  margin:
    32px
    0
    20px;

  color: #c90000;

  font-size:
    clamp(
      60px,
      5vw,
      92px
    );

  line-height: .96;

  font-weight: 900;

  text-transform: uppercase;
}

.duty-v2-line {
  width: 100%;
  height: 3px;

  margin-bottom: 22px;

  background: #c90000;
}


/* =========================================================
   DUTY CONTACT
========================================================= */

.contact-info-card {
  display: flex;
  align-items: center;

  gap: 16px;

  margin:
    11px
    0;

  padding:
    14px
    18px;

  background: #fff;

  border:
    1px solid #eeeeee;

  border-radius: 18px;

  box-shadow:
    0 7px 22px
    rgba(0,0,0,.05);
}

.contact-info-icon {
  width: 50px;
  height: 50px;

  min-width: 50px;

  display: grid;

  place-items: center;
}

.contact-info-icon svg {
  width: 28px;
  height: 28px;

  fill: currentColor;
}

.contact-info-icon.location {
  background: #d60000;

  color: #fff;

  border-radius: 50%;
}

.contact-info-icon.location svg {
  width: 28px;
  height: 28px;

  fill: #fff;
}

.contact-info-card small {
  display: block;

  margin-bottom: 3px;

  color: #d60000;

  font-size: 15px;

  font-weight: 800;
}

.contact-info-card b {
  display: block;

  color: #111827;

  font-size: 25px;

  line-height: 1.18;
}


/* =========================================================
   DUTY DOTS
========================================================= */

.duty-v2-dots {
  display: flex;

  justify-content: center;

  gap: 13px;

  margin-top: 28px;
}

.duty-v2-dots span {
  width: 17px;
  height: 17px;

  background: #cfcfcf;

  border-radius: 50%;
}

.duty-v2-dots span.active {
  background: #d60000;
}


/* =========================================================
   MAP
========================================================= */

.duty-v2-map {
  position: relative;

  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.map-visual {
  width: 100%;
  height: 78%;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  background-color: #f1eeee;

  background-image:
    url("./assets/milas-map.png");

  background-size: cover;

  background-position: center;

  border-radius: 32px;

  box-shadow:
    0 16px 50px
    rgba(120,0,0,.18);
}

.map-visual::after {
  content: "";

  position: absolute;

  inset: 0;

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

  pointer-events: none;
}

.map-pin {
  position: relative;

  z-index: 2;

  width: 125px;
  height: 125px;

  display: grid;

  place-items: center;

  border-radius: 50%;

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

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.16);
}

.map-pin svg {
  width: 80px;
  height: 80px;

  fill: #d60000;

  filter:
    drop-shadow(
      0 8px 8px
      rgba(0,0,0,.15)
    );
}


/* =========================================================
   MAP QR
========================================================= */

.map-qr-card {
  position: absolute;

  top: 165px;
  right: 45px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 0;

  background: transparent;

  box-shadow: none;
}

.map-qr-card img {
  width: 88px;
  height: 88px;

  flex-shrink: 0;

  background: #fff;

  padding: 3px;
}

.map-qr-card b {
  display: block;

  color: #d60000;

  font-size: 19px;

  line-height: 1.18;
}

.map-qr-card small {
  display: block;

  margin-top: 4px;

  color: #444;

  font-size: 13px;
}


/* =========================================================
   DUTY FOOTER
========================================================= */

.duty-v2-footer {
  height: 70px;
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #fff;

  color: #444;

  border-top:
    4px solid #b90000;

  font-size: 25px;

  white-space: nowrap;
}

.duty-v2-footer strong {
  color: #d60000;

  font-weight: 900;
}


/* =========================================================
   BLOCKED
========================================================= */

.blocked {
  display: grid;

  place-items: center;

  background: #111;

  color: #fff;

  text-align: center;
}

.blocked h1 {
  margin: 0;

  color: #d60000;

  font-size: 80px;
}

.blocked p {
  font-size: 28px;
}


/* =========================================================
   1366 / SMALLER DISPLAY SUPPORT
========================================================= */

@media (max-width: 1500px) {

  .top {
    grid-template-columns:
      minmax(400px, 1.6fr)
      minmax(240px, .85fr)
      minmax(155px, .52fr)
      minmax(190px, .63fr);

    gap: 12px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .logo-box {
    width: 82px;
    height: 82px;

    min-width: 82px;

    font-size: 54px;
  }

  .brand h1 {
    font-size: 43px;
  }

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

  .smart-card-text strong {
    font-size: 19px;
  }

  .campaign-copy {
    padding-left: 34px;
    padding-right: 30px;
  }

  .campaign-product-image img {
    max-height: 260px;
  }

}
/* V3: fit duty screen to any viewport; QR in map lower-right */
.pharmacy-duty-v2 { min-height: 0; }
.pharmacy-duty-v2 .top { flex-shrink: 0; }
.duty-v2-section { min-height: 0; overflow: hidden; gap: clamp(12px,2vw,32px); padding: clamp(12px,2vh,28px) clamp(14px,3vw,42px); }
.duty-v2-left { min-height: 0; overflow: hidden; justify-content: center; }
.duty-v2-label { min-height: 0; padding: clamp(9px,1.2vh,15px) clamp(12px,2vw,25px); max-width: 100%; }
.duty-v2-label strong { font-size: clamp(16px,2.1vw,29px); }
.duty-v2-label span { font-size: clamp(20px,2.4vw,34px); }
.duty-v2-left h2 { font-size: clamp(30px,4.2vw,72px); margin: clamp(10px,2vh,22px) 0; overflow-wrap: anywhere; }
.duty-v2-line { margin-bottom: clamp(8px,1.5vh,18px); }
.contact-info-card { margin: clamp(4px,.7vh,9px) 0; padding: clamp(7px,1vh,12px) clamp(9px,1vw,16px); }
.contact-info-card b { font-size: clamp(15px,1.55vw,23px); overflow-wrap: anywhere; }
.contact-info-icon { width: clamp(34px,3.5vw,48px); height: clamp(34px,3.5vw,48px); min-width: clamp(34px,3.5vw,48px); }
.duty-v2-map { min-height: 0; align-items: stretch; }
.map-visual { height: 100%; min-height: 0; }
.map-qr-card { top: auto; right: clamp(10px,1.5vw,24px); bottom: clamp(10px,1.5vw,24px); max-width: calc(100% - 20px); padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.map-qr-card img { width: clamp(64px,7vw,92px); height: clamp(64px,7vw,92px); }
.map-qr-card b { font-size: clamp(12px,1.2vw,17px); }
.map-qr-card small { font-size: clamp(10px,.9vw,13px); }
.duty-v2-footer { flex-shrink: 0; height: clamp(42px,6vh,70px); min-height: 0; font-size: clamp(15px,1.6vw,25px); }
@media(max-height:850px) {
 .top { height: 110px; min-height: 110px; padding-top: 8px; padding-bottom: 8px; }
 .logo-box { width: 75px; height: 75px; min-width: 75px; font-size: 46px; }
 .brand h1 { font-size: clamp(24px,3vw,46px); }
 .brand p { font-size: 14px; }
 .smart-card { height: 70px; }
 .duty-v2-left h2 { font-size: clamp(29px,4vw,60px); }
 .duty-v2-dots { margin-top: 10px; }
}
@media(max-width:1050px) {
 .top { display:flex; height:auto; min-height:0; flex-wrap:wrap; gap:8px; padding:8px 12px; }
 .brand { flex:1 1 100%; gap:10px; }
 .logo-box { width:48px; height:48px; min-width:48px; border-width:4px; font-size:29px; border-radius:9px; }
 .brand h1 { font-size:clamp(21px,4vw,36px); }
 .brand p { font-size:12px; margin-top:3px; }
 .smart-card { flex:1 1 0; width:auto; min-width:0; height:54px; padding:6px; gap:7px; border-radius:12px; }
 .card-icon { width:30px; height:30px; min-width:30px; }
 .card-icon svg { width:19px; height:19px; }
 .smart-card-text strong { font-size:clamp(12px,1.7vw,17px); }
 .smart-card-text span { font-size:10px; margin-top:3px; }
 .clock-text strong { font-size:clamp(15px,2vw,21px); }
 .duty-v2-section { grid-template-columns: 1fr 1fr; gap:12px; padding:12px; }
 .duty-v2-left h2 { font-size:clamp(27px,4vw,48px); }
}
@media(max-width:650px) {
 .screen { overflow-y:auto; height:100dvh; }
 .top { flex-shrink:0; }
 .smart-card { flex:1 1 29%; }
 .weather-card { max-width:none; }
 .duty-v2-section { display:flex; flex-direction:column; flex:1 0 auto; overflow:visible; gap:12px; }
 .duty-v2-left { overflow:visible; }
 .duty-v2-label strong { font-size:clamp(15px,4vw,22px); }
 .duty-v2-left h2 { font-size:clamp(30px,8vw,48px); }
 .contact-info-card b { font-size:16px; }
 .duty-v2-map { min-height:240px; height: min(48vh,380px); flex-shrink:0; }
 .map-visual { height:100%; }
 .duty-v2-footer { padding:8px; white-space:normal; text-align:center; }
}
@media(max-height:570px) and (min-width:651px) {
 .top { height:78px; min-height:78px; }
 .logo-box { width:52px; height:52px; min-width:52px; font-size:32px; }
 .smart-card { height:50px; }
 .duty-v2-label { padding:6px 12px; }
 .duty-v2-left h2 { font-size:clamp(22px,3vw,40px); margin:6px 0; }
 .contact-info-card { padding:5px 8px; margin:3px 0; }
 .contact-info-card b { font-size:14px; }
 .duty-v2-footer { height:34px; }
}

/* V4 — Brand-owned red header, clear separation and live embedded map */
.pharmacy-duty-v2 .top { position:relative; background:#bd0000; border-bottom:4px solid #8e0000; color:#fff; padding-right:135px; }
.pharmacy-duty-v2 .brand h1, .pharmacy-duty-v2 .brand p { color:#fff; }
.pharmacy-duty-v2 .logo-box { background:#fff; color:#c00; border-color:#fff; }
.pharmacy-duty-v2 .smart-card { background:rgba(255,255,255,.97); box-shadow:none; }
.pharmacy-duty-v2 .clock-card { background:#8f0000; }
.pharmacy-duty-v2 .duty-v2-section { background:#fff9f9; }
.pharmacy-duty-v2 .duty-v2-left { padding:clamp(10px,2vw,30px); background:#fff; border:1px solid #f3e5e5; border-radius:24px; }
.pharmacy-duty-v2 .duty-v2-label { box-shadow:0 5px 15px rgba(170,0,0,.12); }
.pharmacy-duty-v2 .duty-v2-map { border-radius:24px; overflow:hidden; }
.pharmacy-duty-v2 .map-visual { background:#eee; border-radius:24px; position:relative; }
.duty-map-frame { width:100%; height:100%; display:block; border:0; background:#eee; }
.map-open-link { position:absolute; left:12px; bottom:12px; z-index:5; background:#fff; color:#b80000; text-decoration:none; font-weight:800; font-size:13px; padding:10px 13px; border-radius:10px; box-shadow:0 2px 10px #0002; }
.kiosk-fullscreen { position:absolute; right:10px; top:8px; z-index:10; border:1px solid #ffffffaa; background:#8f0000; color:white; border-radius:9px; padding:7px 9px; font-size:12px; font-weight:700; cursor:pointer; }
@media(max-width:1050px) { .pharmacy-duty-v2 .top { padding-right:12px; padding-top:34px; } .kiosk-fullscreen { top:5px; } }
@media(max-width:650px) { .pharmacy-duty-v2 .duty-v2-left { padding:12px; } .duty-v2-map { overflow:visible!important; } }

/* V5 — One to four duty pharmacies on one screen */
.duty-multi-screen{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff8f8}
.duty-multi-screen .top{flex-shrink:0}
.duty-multi-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(8px,1.6vh,18px) clamp(12px,2vw,30px);gap:clamp(7px,1.2vh,15px);overflow:hidden}
.duty-multi-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-shrink:0}
.duty-multi-eyebrow{font-weight:800;color:#b60000;font-size:clamp(11px,1vw,16px)}
.duty-multi-heading h1{font-size:clamp(19px,2.4vw,36px);color:#b80000;margin:2px 0 0;line-height:1.12}
.duty-page-indicator{font-size:clamp(11px,1vw,16px);font-weight:800;color:#a00;white-space:nowrap}
.duty-multi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.5vh,18px);flex:1;min-height:0}
.duty-multi-grid.count-1{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.duty-multi-grid.count-2{grid-template-rows:minmax(0,1fr)}
.duty-multi-card{min-width:0;min-height:0;display:flex;flex-direction:column;gap:clamp(4px,.8vh,12px);padding:clamp(10px,1.5vw,22px);border:1px solid #f1dede;border-radius:18px;background:white;box-shadow:0 3px 14px #9e00000d;overflow:hidden}
.duty-multi-card-top{display:flex;align-items:center;gap:9px;color:#b80000;font-weight:900;font-size:clamp(10px,.9vw,14px)}
.duty-number{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#c00;color:#fff}
.duty-multi-card h2{font-size:clamp(20px,2.4vw,42px);color:#c00;line-height:1.08;margin:0;overflow-wrap:anywhere}
.duty-multi-contact{display:flex;align-items:flex-start;gap:9px;font-size:clamp(12px,1.12vw,19px);color:#142033;font-weight:650;min-width:0}
.duty-multi-contact p{margin:0;overflow-wrap:anywhere;line-height:1.25}
.duty-multi-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:12px;min-height:0}
.duty-multi-actions a{display:inline-block;background:#c00;color:white;text-decoration:none;border-radius:10px;padding:clamp(8px,1vh,12px) clamp(10px,1.5vw,20px);font-weight:800;font-size:clamp(12px,1vw,17px)}
.duty-multi-qr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.duty-multi-qr img{width:clamp(65px,7.5vh,100px);height:clamp(65px,7.5vh,100px);object-fit:contain}
.duty-multi-qr small{font-size:clamp(10px,.9vw,14px);font-weight:800;color:#c00;max-width:60px}
.duty-multi-grid.count-1 .duty-multi-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:24px}
.duty-multi-grid.count-1 .duty-multi-card-top,.duty-multi-grid.count-1 h2,.duty-multi-grid.count-1 .duty-multi-contact{grid-column:1}
.duty-multi-grid.count-1 .duty-multi-card h2{font-size:clamp(30px,4.4vw,70px)}
.duty-single-map{grid-column:2;grid-row:1/6;min-height:0;position:relative;border-radius:16px;overflow:hidden;background:#eee}
.duty-single-map iframe{width:100%;height:100%;border:0}
.duty-multi-grid.count-1 .duty-multi-actions{grid-column:1;grid-row:5}
.duty-multi-empty{grid-column:1/-1;display:grid;place-items:center;text-align:center;font-size:clamp(18px,2vw,28px);color:#9c0000;background:white;border-radius:20px;padding:25px}
@media(max-height:750px) and (min-width:851px){.duty-multi-card{gap:4px;padding:10px 16px}.duty-multi-card h2{font-size:clamp(19px,2vw,30px)}.duty-multi-qr img{width:60px;height:60px}.duty-multi-main{padding:7px 14px;gap:6px}}
@media(max-width:850px){.duty-multi-screen{height:auto;min-height:100dvh;overflow:visible}.duty-multi-main{overflow:visible}.duty-multi-grid,.duty-multi-grid.count-2,.duty-multi-grid.count-1{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.duty-multi-card{min-height:230px}.duty-multi-grid.count-1 .duty-multi-card{display:flex}.duty-single-map{height:240px;min-height:240px;order:5}.duty-multi-grid.count-1 .duty-multi-actions{order:6}.duty-multi-heading h1{font-size:clamp(20px,4vw,30px)}}

/* V6: Dokunmasız vitrin; tek merkezli başlık ve dengeli bilgi alanı */
.duty-multi-heading{justify-content:center;text-align:center;position:relative}
.duty-multi-heading>div{width:100%}
.duty-multi-heading h1{font-size:clamp(23px,2.7vw,40px);margin:0;line-height:1.15}
.duty-page-indicator{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.duty-multi-card{position:relative}
.duty-card-information{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,22px);justify-content:center;align-items:flex-start;flex:1;min-height:0}
.duty-card-information h2{font-size:clamp(26px,3.1vw,52px)}
.duty-multi-actions{justify-content:flex-end;margin-top:0}
.duty-multi-qr small{max-width:110px}
.duty-multi-grid.count-1 .duty-multi-card{grid-template-rows:auto 1fr auto}
.duty-multi-grid.count-1 .duty-multi-card-top{grid-column:1;grid-row:1}
.duty-multi-grid.count-1 .duty-card-information{grid-column:1;grid-row:2;align-self:center;justify-content:center}
.duty-multi-grid.count-1 .duty-multi-actions{grid-column:1;grid-row:3}
.duty-single-map{grid-column:2;grid-row:1/4;background:#f3f0eb}
.map-location-caption{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;background:rgba(255,255,255,.93);border-radius:9px;padding:8px 12px;color:#a00;font-weight:700;font-size:clamp(11px,1vw,15px);pointer-events:none;overflow-wrap:anywhere}
.weather-card .smart-card-text{justify-content:center}
@media(max-width:850px){.duty-multi-grid.count-1 .duty-multi-card{display:flex}.duty-card-information{flex:initial}.duty-single-map{order:3}.duty-multi-actions{order:4}.duty-page-indicator{position:static;transform:none}.duty-multi-heading{flex-direction:column}}
@media(max-height:650px) and (min-width:851px){.duty-multi-heading h1{font-size:clamp(20px,2.3vw,30px)}.duty-card-information{gap:8px}.duty-card-information h2{font-size:clamp(23px,2.7vw,42px)}}

/* V7: sağa yaslanmış başlık kartları; V5 mobil görünümü korunur */
@media (min-width:851px) {
  .duty-multi-screen .top { padding-right:clamp(12px,1.4vw,24px)!important; display:flex; align-items:center; gap:clamp(8px,1.1vw,18px); }
  .duty-multi-screen .top .brand { margin-right:auto; min-width:0; }
  .duty-multi-screen .top .smart-card { flex-shrink:0; margin-right:0!important; }
  .duty-multi-screen .top .clock-card { margin-left:0!important; }
}
.kiosk-fullscreen { display:none!important; }
.map-pending { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; padding:24px; color:#a00; font-size:clamp(18px,2vw,30px); background:#f4f0ec; }
.map-pending small { font-size:13px; color:#555; max-width:320px; }

/* V8 — Masaüstü üst şerit: marka ve üç kart çakışmadan görünür. Mobil V5 düzeni korunur. */
@media (min-width:1051px) {
  .duty-multi-screen .top.pharmacy-header,
  .duty-multi-screen .top {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(245px,310px) minmax(125px,155px) minmax(205px,240px)!important;
    align-items:center!important;
    gap:clamp(9px,1vw,17px)!important;
    padding:12px clamp(16px,1.5vw,28px)!important;
    height:110px!important;
    min-height:110px!important;
    box-sizing:border-box;
  }
  .duty-multi-screen .top .brand {min-width:0!important; margin:0!important; overflow:hidden; gap:12px;}
  .duty-multi-screen .top .brand-text {min-width:0; overflow:hidden;}
  .duty-multi-screen .top .brand h1 {font-size:clamp(22px,2.2vw,35px)!important;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .duty-multi-screen .top .brand p {font-size:clamp(11px,1vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .duty-multi-screen .top .logo-box {width:70px;min-width:70px;height:70px;font-size:40px;}
  .duty-multi-screen .top .smart-card {width:100%!important;min-width:0!important;max-width:none!important;height:70px;box-sizing:border-box;margin:0!important;padding:8px 10px;gap:9px;}
  .duty-multi-screen .top .smart-card-text {min-width:0;overflow:hidden;}
  .duty-multi-screen .top .smart-card-text strong {font-size:clamp(14px,1.4vw,22px);white-space:nowrap;}
  .duty-multi-screen .top .smart-card-text span {font-size:clamp(10px,.85vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
  .duty-multi-screen .top .card-icon {width:43px;min-width:43px;height:43px;}
  .duty-multi-screen .top .clock-text strong {font-size:clamp(18px,1.9vw,29px);}
}
@media (min-width:851px) and (max-width:1050px) {
  .duty-multi-screen .top {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(180px,1fr) minmax(100px,.6fr) minmax(150px,.8fr)!important;gap:8px;padding:10px!important;min-height:86px!important;}
  .duty-multi-screen .top .brand {flex:initial!important;min-width:0;overflow:hidden;}
  .duty-multi-screen .top .brand-text {min-width:0;overflow:hidden;}
  .duty-multi-screen .top .brand h1 {font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .duty-multi-screen .top .smart-card {width:100%;min-width:0;max-width:none;height:58px;}
}
.map-location-caption {display:none!important;}