/* MAROCCO — halaman dalam riad, bingkai tapal kuda */
.ma-page { --color-primary:#1e40af; --color-accent:#c2410c; --color-bg:#f8f1e7; --ma-ink:#33261d; --ma-muted:#7d6d5f;
  background:var(--color-accent); color:var(--ma-ink); font-family:'Cabin',system-ui,sans-serif; margin:-1.5rem -12px 0; padding:18px 12px 40px; text-align:center; }
.ma-riad { max-width:960px; margin:0 auto; background:var(--color-bg); border:5px solid #fff;
  border-radius:180px 180px 12px 12px/120px 120px 12px 12px; box-shadow:0 14px 40px rgba(51,38,29,.28); overflow:hidden; }
.ma-court { padding:44px 16px 34px; }
.ma-breadcrumb { font-size:12px; color:var(--ma-muted); text-align:left; margin-bottom:10px; } .ma-breadcrumb a { color:var(--color-primary); }
.ma-kicker { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.3em; color:var(--color-accent); }
.ma-h1 { font-family:'Philosopher',Georgia,serif; font-weight:700; font-size:clamp(23px,5.4vw,38px); line-height:1.14; margin:0 0 8px; }
.ma-date { margin:0; font-size:12.5px; color:var(--ma-muted); }
.ma-zellige { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:28px 0 0; }
.ma-oct { display:inline-flex; align-items:center; justify-content:center; width:clamp(68px,17vw,92px); height:clamp(68px,17vw,92px);
  background:var(--color-primary); color:#fff; font-family:'Philosopher',Georgia,serif; font-weight:700; font-size:clamp(28px,8vw,42px);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  opacity:0; transform:scale(.9); animation:ma-in .45s ease forwards; }
.ma-oct-empty { background:#d8cdc0; color:#a6988a; }
@keyframes ma-in { to{opacity:1;transform:scale(1);} }
.ma-meta { margin:20px 0 0; font-size:12.5px; color:var(--ma-muted); }
.ma-fountain { display:block; width:54px; height:54px; margin:22px auto; border-radius:50%;
  background:radial-gradient(circle,#9ec7e8 0 42%,transparent 43%),conic-gradient(var(--color-primary) 0 25%,#fff 25% 50%,var(--color-primary) 50% 75%,#fff 75%);
  border:3px solid var(--color-primary); }
.ma-desc { margin:0 auto; max-width:600px; font-size:14px; color:var(--ma-muted); }
.ma-section { margin-top:36px; }
.ma-h2 { font-family:'Philosopher',Georgia,serif; font-weight:700; font-size:clamp(20px,4.6vw,27px); margin:0 0 16px; color:var(--color-primary); }
.ma-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; }
.ma-filter select { height:40px; padding:0 12px; border:2px solid var(--color-primary); border-radius:20px 20px 6px 6px; background:#fff; font-family:inherit; font-size:13px; }
.ma-btn { display:inline-flex; align-items:center; height:40px; padding:0 18px; border:2px solid var(--color-primary); border-radius:20px 20px 6px 6px;
  background:var(--color-primary); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.ma-btn:hover { background:#1a367f; color:#fff; } .ma-btn-ghost { background:var(--color-accent); border-color:var(--color-accent); }
.ma-mosaic { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.ma-piece { background:#fff; border:2px solid #e3d7c8; padding:12px 8px; display:flex; flex-direction:column; gap:2px;
  clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
.ma-piece-date { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ma-muted); }
.ma-piece-num { font-family:'Philosopher',Georgia,serif; font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--color-primary); }
.ma-piece-day { font-size:10.5px; color:var(--ma-muted); }
.ma-empty { background:#fff; border:2px dashed var(--color-primary); border-radius:12px; padding:38px 18px; }
.ma-empty h3 { font-family:'Philosopher',Georgia,serif; font-size:18px; margin:0 0 6px; } .ma-empty p { margin:0; font-size:13px; color:var(--ma-muted); }
.ma-pagination { margin-top:14px; font-size:13px; color:var(--ma-muted); }
.ma-pagination .page-link { border-radius:12px 12px 4px 4px; border:2px solid var(--color-primary); color:var(--color-primary); font-weight:700; }
.ma-pagination .page-item.active .page-link { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.ma-arches { display:grid; gap:12px; }
.ma-arch { background:#fff; border:2px solid var(--color-accent); border-radius:80px 80px 8px 8px/56px 56px 8px 8px; padding:26px 14px 18px; }
.ma-arch-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ma-muted); }
.ma-arch-value { display:block; margin:6px 0 3px; font-family:'Philosopher',Georgia,serif; font-weight:700; font-size:19px; color:var(--color-primary); }
.ma-arch-note { display:block; font-size:11.5px; color:var(--ma-muted); }
.ma-note { margin:18px 0 0; font-size:13px; color:var(--ma-muted); } .ma-note a { color:var(--color-accent); font-weight:700; }
@media (min-width:576px) { .ma-mosaic { grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px) { .ma-mosaic { grid-template-columns:repeat(5,1fr); } .ma-arches { grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px) { .ma-page { margin-left:-24px; margin-right:-24px; } }
@media (max-width:575.98px) { .ma-court { padding:30px 12px 26px; } .ma-riad { border-radius:110px 110px 10px 10px/80px 80px 10px 10px; } .ma-zellige { gap:7px; } }
@media (prefers-reduced-motion:reduce) { .ma-oct { animation:none; opacity:1; transform:none; } }