:root{color-scheme:dark;--bg:#080908;--panel:#121312;--text:#f5f6f5;--muted:#959a95;--green:#00b600;--line:#242724;--header:#030403;--glow:#052204}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}body.light{color-scheme:light;--bg:#f6f7f4;--panel:#fff;--text:#182218;--muted:#657065;--green:#138210;--line:#dce3d9;--header:#fff;--glow:#e4f1df}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:4px}header{height:72px;border-bottom:1px solid var(--line);background:var(--header);position:sticky;top:0;z-index:10}.header-inner{max-width:856px;height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.icon{background:var(--panel);border-radius:16px;width:44px;height:44px;display:grid;place-items:center;font-size:26px;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px}.brand img{width:78px;height:48px;object-fit:contain}.brand span{text-align:left;font-weight:700;font-size:13px}.brand small{display:block;color:var(--green);font-size:10px;margin-top:5px;font-weight:500}.controls{display:flex;gap:6px;align-items:center}.languages{padding:4px;background:var(--panel);border-radius:14px;display:flex}.languages button{font-size:10px;font-weight:700;padding:10px 8px;border-radius:10px;color:var(--muted)}.languages button.active{color:#111;background:#fff}main{max-width:856px;margin:20px auto 0;min-height:65vh}.hero{padding:26px 24px 30px;border-radius:28px;background:radial-gradient(ellipse at 96% 0,var(--glow),transparent 65%),linear-gradient(110deg,var(--glow),var(--bg) 60%)}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--green);text-transform:uppercase;margin:0 0 8px}.hero .eyebrow.brand-label{color:var(--muted);margin-top:18px}.pill{display:inline-block;background:#07330755;color:var(--green);border-radius:20px;padding:8px 12px;font-size:9px;letter-spacing:1.4px;font-weight:700}h1{font-size:34px;letter-spacing:-1.5px;line-height:1.15;margin:8px 0}h2{font-size:19px;letter-spacing:-.6px;margin:6px 0 16px}h3{margin:0;font-size:16px;letter-spacing:-.5px}.hero p{font-size:13px;color:var(--muted);line-height:1.6;margin:10px 0 24px}.search{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:18px;background:var(--panel);margin:24px 0 16px}.hero .search{background:#080c0822;margin-bottom:0;padding:0}.search span{font-size:25px;color:var(--green)}.search input{width:100%;min-width:0;height:38px;border:1px solid #656c65;background:transparent;color:var(--text);padding:8px 12px;border-radius:0}.search input::placeholder{color:var(--muted)}section{margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:center}.hint{font-size:10px;color:var(--muted)}.quick{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.quick button{flex:0 0 140px;display:flex;align-items:center;gap:10px;padding:10px;background:var(--panel);border-radius:20px;text-align:left;font-size:11px;font-weight:700}.quick img{width:45px;height:45px;object-fit:cover;border-radius:13px}.quick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.categories{display:grid;grid-template-columns:1fr 1fr;gap:14px}.category{position:relative;display:block;overflow:hidden;height:235px;border-radius:26px;text-align:left;background:var(--panel);padding:0;color:white}.category:first-child{grid-column:1/-1;height:290px}.category img,.featured img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.category:hover img,.featured:hover img{transform:scale(1.035)}.category:after,.featured:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#000b 85%,#000e)}.category .caption{position:absolute;bottom:22px;left:20px;right:20px;z-index:1}.category h3{font-size:26px;letter-spacing:-1px;padding-right:38px}.category small{display:block;color:#ccc;font-size:11px;margin-top:8px}.arrow{position:absolute;right:0;bottom:0;width:40px;height:40px;border-radius:50%;background:var(--green);color:#071407;display:grid;place-items:center;font-size:20px}.category-top{padding:2px 0 8px}.category-top h1{font-size:28px}.filters{display:flex;gap:8px;overflow-x:auto;margin:14px 0 28px}.filters button{white-space:nowrap;padding:13px 17px;background:var(--panel);border-radius:24px;font-size:12px;color:var(--muted)}.filters button.active{background:var(--green);color:#061606}.featured-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.featured{flex:0 0 44%;height:280px;border-radius:26px;overflow:hidden;position:relative;text-align:left;padding:0;color:white;scroll-snap-align:start}.featured .caption{position:absolute;z-index:1;bottom:22px;left:20px;right:20px}.featured h3{font-size:18px;margin:0 0 18px}.price{font-size:18px;font-weight:800;color:var(--green);white-space:nowrap}.tag{display:inline-block;font-size:9px;color:var(--green);background:#063c183b;padding:5px 7px;border-radius:10px;margin-bottom:7px;font-weight:700}.featured>.tag{position:absolute;z-index:2;left:16px;top:16px;color:#fff;background:#071b16d9}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.product{background:var(--panel);border-radius:22px;padding:12px;display:flex;gap:13px;text-align:left;min-width:0;min-height:146px}.product img{width:112px;height:112px;object-fit:cover;border-radius:17px}.product-content{flex:1;min-width:0;display:flex;flex-direction:column}.product h3{font-size:14px;line-height:1.3}.product p{color:var(--muted);font-size:11px;line-height:1.5;margin:6px 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}.product .arrow{position:static;width:30px;height:30px;border-radius:10px;font-size:15px}.empty{padding:60px 20px;text-align:center;color:var(--muted);grid-column:1/-1}footer{max-width:856px;margin:50px auto 0;border-top:1px solid var(--line);padding:26px 0 35px;display:flex;align-items:center;justify-content:center;gap:15px;color:var(--muted);font-size:11px}footer img{width:65px;height:44px;object-fit:contain}dialog{border:1px solid var(--line);border-radius:28px;background:var(--panel);color:var(--text);padding:0;max-width:520px;width:calc(100% - 28px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}.close{position:absolute;top:14px;right:14px;z-index:2;background:#111c;color:white}.detail-img{width:100%;max-height:330px;object-fit:cover;display:block}.detail-info{padding:26px}.detail-info h2{font-size:25px;line-height:1.2;margin:8px 0 18px}.detail-info p{color:var(--muted);font-size:14px;line-height:1.8}.detail-info h3{font-size:14px;margin-top:24px}body:has(dialog[open]){overflow:hidden}.results-heading{margin-top:25px}@media(max-width:920px){.header-inner,main{margin-left:20px;margin-right:20px}footer{margin-left:20px;margin-right:20px}}@media(max-width:600px){header{height:68px}.header-inner{margin:0 14px;gap:6px}.brand{gap:6px}.brand img{width:64px}.brand span{font-size:10px}.brand small{font-size:9px}.icon{width:36px;height:40px;border-radius:13px}.controls{gap:3px}.languages button{font-size:9px;padding:9px 6px}main{margin:16px 16px 0}.hero{padding:22px 18px 25px;border-radius:24px}h1{font-size:29px;letter-spacing:-1.3px}.hero p{font-size:12px}.quick button{flex-basis:138px}.categories{gap:12px}.category,.category:first-child{height:205px}.category:first-child{height:235px}.category h3{font-size:19px}.category:not(:first-child) .caption{left:14px;right:14px;bottom:17px}.category:not(:first-child) h3{font-size:18px;padding-right:0;margin-bottom:33px}.category:not(:first-child) .arrow{width:28px;height:28px;font-size:16px}.category small{font-size:10px}.featured{flex-basis:82%;height:255px}.product-grid{grid-template-columns:1fr}.product img{width:110px;height:115px}.product h3{font-size:14px}.product p{font-size:12px}.section-heading h2{font-size:18px}.hint{font-size:9px}footer{margin-top:35px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.quick img{flex-shrink:0}

/* Desktop horizontal drag */
@media (pointer: fine) {
  .quick,
  .filters,
  .featured-list {
    cursor: grab;
    user-select: none;
  }

  .quick.mouse-dragging,
  .filters.mouse-dragging,
  .featured-list.mouse-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
}

/* =========================================================
   UNIFIED ARROW SYSTEM
   Desktop + Mobile
   Font glyph kullanmaz; geometrik olarak tam ortalanır
   ========================================================= */

.arrow {
  --arrow-size: 38px;
  --arrow-shaft: 13px;
  --arrow-head: 6px;
  --arrow-stroke: 2px;

  width:var(--arrow-size);
  height:var(--arrow-size);
  min-width:var(--arrow-size);
  min-height:var(--arrow-size);
  flex:0 0 var(--arrow-size);

  padding:0;
  margin:0;

  border:0;
  border-radius:999px;

  background:var(--green);
  color:#071407;

  display:grid;
  place-items:center;

  font-size:0;
  line-height:0;

  box-sizing:border-box;

  transition:
    transform .22s ease,
    filter .22s ease,
    box-shadow .22s ease;

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

/* Okun yatay gövdesi */
.arrow::before {
  content:'';

  position:absolute;
  left:50%;
  top:50%;

  width:var(--arrow-shaft);
  height:var(--arrow-stroke);

  background:currentColor;
  border-radius:999px;

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

/* Okun sağ ucu */
.arrow::after {
  content:'';

  position:absolute;
  left:50%;
  top:50%;

  width:var(--arrow-head);
  height:var(--arrow-head);

  border-top:var(--arrow-stroke) solid currentColor;
  border-right:var(--arrow-stroke) solid currentColor;

  box-sizing:border-box;

  transform:
    translate(0,-50%)
    rotate(45deg);

  transform-origin:center;
}

/* Kategori kartındaki ok */
.category .arrow {
  position:absolute;
  right:0;
  bottom:0;
}

/* Normal ürün ve öne çıkan ürün oku */
.product .arrow,
.featured .arrow {
  position:relative;
  right:auto;
  bottom:auto;
}

/* Desktop etkileşimi */
@media (hover:hover) and (pointer:fine) {
  .category:hover .arrow,
  .product:hover .arrow,
  .featured:hover .arrow {
    transform:translateY(-2px);
    filter:brightness(1.08);

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

  .category:active .arrow,
  .product:active .arrow,
  .featured:active .arrow {
    transform:scale(.96);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {
  .arrow {
    --arrow-size:34px;
    --arrow-shaft:12px;
    --arrow-head:5.5px;
    --arrow-stroke:2px;

    box-shadow:
      0 3px 12px rgba(0,0,0,.16);
  }

  /*
   * Küçük kategori kartlarında başlık ile okun
   * birbirine girmesini önler.
   */
  .category:not(:first-child) h3 {
    margin-bottom:38px;
  }

  /*
   * Ürün satırında oku fiyatla aynı optik eksende tutar.
   */
  .product-bottom {
    min-height:34px;
    align-items:center;
  }
}
/* Mert Ozince Medya Sanatlari signature */
footer {
  flex-wrap:wrap;
  row-gap:12px;
}

.agency-signature {
  flex:0 0 100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
  padding-top:10px;
}

.agency-signature img {
  width:132px;
  height:auto;
  max-width:34vw;
  object-fit:contain;
  opacity:.46;
  filter:none;
  pointer-events:none;
  user-select:none;
  transition:opacity .25s ease;
}

body.light .agency-signature img {
  filter:invert(1);
  opacity:.52;
}

@media (hover:hover) and (pointer:fine) {
  footer:hover .agency-signature img {
    opacity:.62;
  }

  body.light footer:hover .agency-signature img {
    opacity:.68;
  }
}

@media (max-width:600px) {
  .agency-signature {
    padding-top:8px;
    margin-top:0;
  }

  .agency-signature img {
    width:112px;
    max-width:42vw;
    opacity:.48;
  }

  body.light .agency-signature img {
    opacity:.55;
  }
}

/* Final arrow normalization - desktop / tablet / mobile */
.arrow {
  position:relative;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:0 !important;
  overflow:visible;
}

.arrow::before,
.arrow::after {
  pointer-events:none;
}